Tags in Salesforce are words or short phrases that you can align with your Salesforce records to describe and organize your Salesforce data in a personalized way. You can utilize Salesforce tags to group records from various objects by a standard topic or usage, and then use those tags to search and gather information quickly.
Introduction To VisualForce Tags
VisualForce tags provide developers a more powerful way to build high-quality applications and customize the Salesforce user interface. VisualForce comprises a collection of XML markup tags. These tags are also known as Components.
Like VisualForce, there are many other development languages like JSP, ASP.NET that consist of tags, serving as a container to the structure data returned by the controller. And the class is written in Apex. VisualForce tags are easy to use when compared with .net.
Advantages of VisualForce
- VisualForce follows the Model View Controller (MVC) development style.
- VisualForce editor Panel is available at the bottom of the page for each VisualForce page.
- VisualForce consists of a large number of built-in components.
- VisualForce can also be integrated with HTML, CSS, Ajax, jQuery.
Types of VisualForce tags
A single VisualForce page is required to be wrapped inside a single page component tag. This component supports HTML pass-through attributes using the “HTML-” prefix.
Pass-through attributes are attached to the generated <html> tag.
VisualForce Tags are divided into the following categories:
- Input tags.
- Output tags.
- Select tags.
- Form tags.
- Page tags.
- Action tags.
- Style tags.
What is the Iframe Tag in Salesforce?
The Iframe is the tag that can be used to display another document using the current HTML document.
Ex:<iframe src=”https://www.w3schools.com”
title=”W3Schools Free Online Web Tutorials”>
</iframe>
Why need to use an Iframe tag in Salesforce?
If you would like to display the document or record outside the URL like YouTube, Google, or any other portal URL, then you need to use the Iframe tag in Aura Component and VisualForce page.
Iframe Tag Syntax
- VisualForce Page:-
<apex:iframe src=”http://www.salesforce.com”
scrolling=”true”
id=”theIframe”/>
- Aura Component:-
<iframe src=”https://www.uol.com.br/”
width=”100%”
height=”500px”
sandbox=”allow-same-origin allow-scripts allow-forms”
scrolling=”auto”
</iframe>
Attributes:-
Attribute Name Attribute Type Access
Frameborder Boolean global
height String global
id String global
rendered Boolean global
scrolling Boolean global
src String global
title String global
width String global
Example:-
- Lightning Component:-
<aura:component implements=”forceCommunity:availableForAllPageTypes” access=”global”>
<aura:attribute name=”iframeUrl” type=”String” />
<aura:attribute name=”width” type=”String” />
<aura:attribute name=”height” type=”String” />
<aura:attribute name=”scrolling” type=”String” />
<aura:attribute name=”frameBorder” type=”String” />
<aura:attribute name=”style” type=”String” />
<aura:attribute name=”sandbox” type=”String” />
<iframe src=”{!v.iframeUrl}”
width=”{!v.width}”
height=”{!v.height}”
style=”{!v.style}”
frameBorder=”{!v.frameBorder}”
sandbox=”{!v.sandbox}”
scrolling=”{!v.scrolling}”/>
</aura:component>
- Call The VisualForce page from Lightning Component:-
VisualForce page:-
<apex:page showHeader=”false”>
<div>
<b style=”color:Red; font-size:100px”>Hello Team</b>
</div>
</apex:page>
Lightning component:-
<iframe src=”https://orgname–flex.cs82.visual.force.com/apex/lightning_calendar”
width=”100%”
height=”400px;” >
</iframe>
Conditions:-
If the developer or user uses the Iframe tag on the VisualForce page, then they must check the Unchecked checkbox and then Enable clickjack protection for customer VisualForce pages with headers disabled on the Session Setting from Setup.
Conclusion
VisualForce is the Markup Language (Tag-based language) similar to HTML and XML, developed by Salesforce.com. It contains tags and controllers where tags are also called as Components. VisualForce uses XML as the syntax to create front end design pages and uses APEX as the backend for implementing business logic.
Want to learn more about VisualForce pages? Get in touch with Salesforce Certified experts to learn how VisualForce in Salesforce can help you get more value from Salesforce CRM Capabilities.
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.
