Types of Salesforce VisualForce Components
VisualForce is a component-based user interface(UI) framework that allows developers to create dynamic and sophisticated applications for mobile and desktop apps that can be hosted on the Lightning Platform. The VisualForce framework is formulated to streamline the development and deployment of cloud applications and websites.
With VisualForce, developers can expand Salesforce’s default capabilities, replace them with new features, and create attractive and engaging custom applications. Developers can use the strong standard features of the controller or write your own custom business logic at Apex. They can even create features for your own organization or create an AppExchange application.
Developers determine the pages by specifying the VisualForce markup and a VisualForce controller. VisualForce is based upon a tag-based markup language that works similar to HTML used to build applications and customize the Salesforce user interface. The VisualForce markup manages what element will display, and how will they display on the page.
To use VisualForce in Salesforce, you need to learn HTML tags. Using HTML and Salesforce Object Query Language (SOQL) tags, we can create VisualForce web pages. If a developer wants to apply or test other technologies in VisualForce, they can do this in practice by creating VisualForce pages that support development technologies such as jQuery, JavaScript, CSS, HTML, Flash, Ajax, and so on.
Before moving forward to the introduction to VisualForce components, let’s discuss some default limitations of VisualForce components and pages.
- The maximum length of a VisualForce page name is 40 characters.
- The maximum length for the source code of a VisualForce page is 1MB of text.
- The maximum length for the source code of a VisualForce component is 1MB of text.
- The maximum width of a VisualForce page that appears on a profile table is 750 pixels.
Now, let’s deep dive into what are VisualForce components and the type of VisualForce components.
What are the VisualForce components?
The VisualForce component is a small part of the functionality that can be reused such as gadgets, panels, UI elements, and things that you use to mark VisualForce pages. You can use the standard VisualForce component and create your own custom components.
Salesforce provides a library of standard and pre-built components, such as <apex:relatedList> and <apex:dataTable>, that can be used to build VisualForce pages.
VisualForce Action Components
1.VisualForce Action Components
The active component in the VisualForce page is used to call the controller method. They are also used to update the display state. The action component allows us to update the VisualForce page and move to a new page. While working with Action Components, these two functionalities (Command button and command link) can be used between apex: form opening and closing tags. <apex:form> and </apex:form>
Command button: It is used to insert HTML buttons.
Command link: It is used to insert anchor text links.
2.VisualForce Styled-Components
They are required to acquire properties of the native user interface of Force.com while creating a VisualForce page. With the use of styled-components, CSS VisualForce can be created. For instance, when you build up a web application by JavaScript and jQuery, you need to add a min.js file in your JavaScript folder for the proper functioning of JavaScript components.
VisualForce Styled components are divided into five categories:
- Page Structure – There are four-page, structure-based components in Force.com – SectionHeader, PageBlockSection, PageBlock, and pageBlockSectionItem. These elements give a clear organizational structure, sections, subsections, labels, and fields.
- Action Containers– PageBlockButtons, toolbar, and toolbar group are the main components based on ActionContainers. They provide buttons, links, and different action functions to VisualForce pages.
- Table – PageBlockTable is used to insert rows and columns in the VisualForce Page.
- Pagination Elements– PanelBar, PanelBarItem, tab, and tabPanel are the key components based on Pagination elements. These are used to show or hide content, buttons, and links dynamically.
- Notifications– PageMessage is the component used to show error messages.
3. VisualForce Data components
VisualForce Data components allow VisualForce page to shift data into controller and used to extract data from controller through various standard HTML elements. They utilize several HTML elements (tags) like <p> </p>, <a>, <br>, etc.
Basically, Data components manage fields and records of the Force.com database within the VisualForce page. Data components are divided into three main parts:
- Metadata-Aware components– Metadata-aware Components are only valid when the fields and records are bounded with the database object. Using a database object of these components let you modify the appearance of the page. InputField and OutputField are the two fields that are used in VisualForce Page.
- Primitive data components– These data components add the functionalities of the VisualForce to standard HTML tags. These components are required to be inserted inside a FORM tag. The Primitive data components are OutputLabel, InputCheckbox, InputFile, InputHidden, InputSecret, InputText, InputTextArea, SelectList, SelectRadio, SelectCheckBox, etc.
- Repeating Components– These components provide the body element to every child in the entire collection. The four repeating elements are PageBlockTable, DataList, DataTable, and Repeat.
- apex:pageBlockTable represents a formatted and styled table similar to a related list table.
- apex:dataTable is an unstyled table that can be used anywhere outside of an apex: page block.
- apex:dataList specifies how a single item should appear in the list.
- apex: repeat allows you to output the contents of a collection according to a specified structure.
4. VisualForce primitive components – These components are used to join standard HTML and VisualForce functions and therefore add VisualForce functionality to HTML elements. Some of the primitive elements are: – OutputPanel, OutputText, OutputLink, Image, IncludeScript, StyleSheet, and iFrame.
5. VisualForce User Interface components
Force.com user interface components allow users to gain both the native look of user interface and its behavior. With these components, users can create, modify and delete records.
Force.com User Interface components consist of four types:
- ListView components – These components link the database object to a component and are equipped when the ‘Enable Enhanced Lists’ option is disabled for the organization.
2. EnhancedList components- This advanced version of Listview components have a drop-down list, columns, sortable columns, view names, and tables of records.
3. Related list Components – These elements provide a list of child components. The related records can be edited, deleted and created based upon the permissions of a user.
4. Detail components – These components provide a subset to the user interface’s details page. Additionally, they provide inline editing features for an object.
6. VisualForce Custom Components
In Salesforce projects, there are few conditions where a developer has to repeat the same code again and again. So, instead of repeating the same code, we can create a VisualForce custom component. Basically, the VisualForce Custom component comes into power when you reuse the piece of code inside your Apex tags. You can use it for n-number of times, after encapsulation of that code.
Custom VisualForce component definitions should be wrapped inside a single <apex: component> tag. You can also use <apex: attribute> tag to modify the component so that a custom component can be used in different ways depending upon the value of different attributes.
Summary
Salesforce has created a comprehensive platform VisualForce for creating on-demand applications. VisualForce is a markup language that enables to define user interface components in Salesforce. This is a very efficient and robust tool that runs on the Force.com platform. By using page layouts, you can easily configure the User interface and with the use of VisualForce pages, you can develop your own customized user interface. Now, Salesforce is using Lightning Design System and Lightning Web components to enhance the user experience.
Akshay Dhiman
Chief Technical Officer
Akshay Dhiman, the CTO of Cloud Analogy, has been a standout and successful Salesforce Platform Developer for years. He has a rich experience in Salesforce Integration, JavaScript, APEX, VisualForce, Force.com Sites, Batch Processing, Lightning, PHP, C++, Java, NodeJs, ReactJs, Angular 8, GraphQL, React Native, Web Technology, and jQuery.Hire the best Salesforce Development Company. Choose certified Salesforce Developers from Cloud Analogy now.
You are doing good job. Keep posting.
Hey Lyanne, Thanks for your kind words. We’re glad you found our content informative and helpful, and we look forward to sharing more with you.
Keep reading 🙂
Pingback: https://canadianpharmaceuticalsonline.home.blog/