What kind of web content can be added in visualforce?

What kind of web content can be added in visualforce?

In this blog post we will see what kind of web content can be added to visualforce page. We will also learn about adding static resources in salesforce and how to use those static resources inside of visualforce page. We will upload css file and javascript file as static resources and refer them from visualforce page.

Following types of web content can be added to visualforce page:

  • Html
  • Css style sheets (saved as static resource)
  • Javascript (saved as static resource)
  • iFrame to embed an external web page within a visualforce page.
  • The component can display an interactive, JavaScript-based Map.

What kind of contents can be added to visualforce?

How to add static resources in Salesforce?

Static resources can be used to store and be referenced in a visualforce page, such as images, stylesheets, JavaScript and libraries.

Adding .css File as a static resource

Step 1)Create a .css file

Step 2) Save it as a static resource

Settings ->static resource

Adding .js file as Static resource in Salesforce

Step 1)Create a .js file

Step 2) Save it as a static resource

Settings ->static resource

HTML:

  • Html can be used in a visualforce page. For example.<html>,<body>,<head>,<h1> and <p> tages can be used to design visualforce pages.
  • Inline css code can be defined for HTML tags inside the HTML page.

[sourcecode lang=”java”]
<apex:page standardController="Account">

<style>

html,body,p {font-family:sans-serif;}

</style>

<apex:form>

<h1> {!Account.Name}</h1><br/>

<h2>Account Details</h2><br/>

<div id="theAccForm">

<div>

<apex:outputLabel for="name" value="Account Name"/>

<apex:inputField  id="name" value="{!Account.Name}"/>

</div> <br/>

<div>

<apex:outputLabel for="emp" value="Number Of Employees"/>

<apex:inputField  id="emp" value="{!Account.NumberOfEmployees}"/>

</div>

<div> <br/>

<apex:outputLabel for="site" value="Account Site:  "/>

<apex:inputField  id="site" value="{!Account.Site}"/>

</div>

<div>  <br/>

<apex:outputLabel for="desc" value="Description:  "/>

<apex:inputField  id="desc" value="{!Account.Description}"/>

</div>

<div id="formControl">

<apex:commandButton  action="{!Save}" value="Save"/>

</div>

</div>

</apex:form>

</apex:page>

[/sourcecode]

Let’s take some examples to see how to add these to the visualforce page?

1)Adding CSS Style Sheets:

<apex:stylesheet> tage can be used to add stylesheets to a visuaforce page.

The CSS stylesheet is saved as a static resource.

The stylesheet can be referenced by the $Resource global variable in the <apex:stylesheet> tag’s value attribute.

Example: SampleSty.css

[sourcecode lang=”css”]

h1 {color: #f00; }

p { background-color: #eec; }

sales {color: #f60; font-weight: bold; }

[/sourcecode]

Example:VisualforceExample2.vf

[sourcecode lang=”java”]
<apex:page showHeader="false" >

<apex:stylesheet  value="{!$Resource.SampleSty}"/>

<h1>Welcome to MyTutorialRack </h1>

<p>

This website contains tutorials related to Salesforce

adminstration, apex, Lightning and visualforce.We help you to become

Salesforce developer.

</p>

<apex:outputText styleClass="sales">

MyTutorialRack

</apex:outputText>

</apex:page>

[/sourcecode]

2)Adding Javascript inside visualforce page:

  • Javascript functionality such as javaScript libraries can be accessed by including a javaScript in a visualforce page.
  • The javascript file needs to be uploaded as a static resource and called from the visualforce page.

Example: JavaSExam.js

[sourcecode lang=”java”]

function changeFont(input, textid) {

if(input.checked) {

document.getElementById(textid).style.fontWeight = "bold";

}

else {

document.getElementById(textid).style.fontWeight = "normal";

}

}

[/sourcecode]

Example:VisualforceExample3.vf

[sourcecode lang=”java”]</pre>
<apex:page>

<apex:includeScript value="{!$Resource.JavaSExam}"/>

<apex:outputPanel layout="block">

<label for="checkbox">Click this box to change text font:</label>

<input id="checkbox" type="checkbox"

onclick="changeFont(this,'{!$Component.thePanel}’);"/>

</apex:outputPanel>

&nbsp;

<!– This outputPanel is the target, and contains

text that will be changed. –>

<apex:outputPanel id="thePanel" layout="block">

Change my font weight!

</apex:outputPanel>

</apex:page>
<pre>
[/sourcecode]

3)Adding iFrame Component:

  • The <apex:iFrame> component is used to create an inline frame within a visualforce page.
  • It can be used to display an external website in salesforce.
  • The external web source can be specified using the src attribute.
  • Other attributes such as width and height can be used to customize the size of the inline frame.

Example:VisualforceExample4.vf

[sourcecode lang=”java”]</pre>
<!—remove the width and height attributes and see the difference à

<apex:page >

<apex:iframe src="https://mytutorialrack.com/"  width="400" height="500"/>

</apex:page>
<pre>
[/sourcecode]

Check out the complete course on visualforce: https://courses.mytutorialrack.com/p/visualforce-tutorial-for-beginners

Learn more https://trailhead.salesforce.com/en/modules/visualforce_fundamentals

This Post Has 9 Comments

  1. berkey

    I don’t know if it’s just me or if perhaps everybody else experiencing issues with your website. It appears as though some of the text in your posts are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This could be a problem with my web browser because I’ve had this happen previously. Cheers|

  2. Gerry Haylock

    Outstanding post, you have pointed out some excellent points , I likewise think this s a very good website.

  3. feed

    Highly descriptive blog, I enjoyed that a lot. Will there be a part 2?|

  4. thefeed

    I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but certainly you’re going to a famous blogger if you aren’t already 😉 Cheers!|

  5. the feed

    I constantly spent my half an hour to read this blog’s articles daily along with a cup of coffee.|

  6. feed

    I like the valuable info you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite sure I’ll learn lots of new stuff right here! Good luck for the next!|

  7. the feed

    Its like you read my thoughts! You appear to understand a lot approximately this, such as you wrote the ebook in it or something. I feel that you just can do with a few p.c. to force the message house a bit, however instead of that, that is wonderful blog. An excellent read. I’ll definitely be back.|

  8. zortilonrel

    It’s onerous to find educated people on this matter, however you sound like you recognize what you’re talking about! Thanks

  9. vreyro linomit

    You are my inhalation, I have few blogs and very sporadically run out from brand :). “The soul that is within me no man can degrade.” by Frederick Douglas.

Leave a Reply