In the modern cloud systems, nearly most of the Applications are hosted in cloud, user started having variety of Applications to use for a particular task. So, the user experience is must. User has less patience these days, so we need to develop applications that treat them as their first class citizens.
What is the maximum time user can wait ?
As per standard, the maximum wait time for a response during UI interation is 1 sec. Though, it seems very low, it is possible to achieve this standard very easily.
Best practice to enhance user experience ?
There might be case where we can't respond back to the user within 1 sec slot. In that case, at least we must report the progress to the user in the form of Progress bar, Status Message or even a Loader image.
How to achieve that ?
Most of the time when the processing can't be responded with Progress value in the Screen, Loader image will be used. In visualforce, actionstatus is used for that purpose. It offers two ways of reporting status message,
Start & Stop Text Message
Start & Stop component
Where is the Code ?
I have seen many developers using startText & stopText attribute in action status to display the message. But, it's very rare to use the facet tag to provide the start & stop component that will be displayed when the action takes place. So, i have illustrated with an example, where it will show a loader image on Start & shows a success image at the Stop phase.
Dialog box is a container where a message is displayed to the user & they can either Accept or Cancel the message.
Is there a standard dialog box component ?
There's no standard component to achieve that. so, we need to build a custom one.
How normally developers achieve this ?
Normally developers would use some third party libraries like Jquery, backbone etc to get the dialog box for their use case. But, it's not necessary, as it is very simple to build one & reuse for all your projects.
What is my solution ?
I build a component to create the dialog box & it can be used by pages when they wish to display a message to the user.
Where is the Code ?
I have illustrated with a page including the dialogbox component that i have created. Dialogbox component will accept the message to be displayed & Ok/Cancel action that will be executed. And also it accepts the rerender list of ids for each Action. It's possible to do everything that we could do with a dialog box.
Alert box is a small container which displays user message in blocking mode that means user can't do any other action in the window.
Is there any standard way of doing it ?
As of now, there's no standard component to display the alert box in the page.
How to build a custom one ?
Traditionally, developers use window.alert function to display the box in the page. This is done different places in the project & it looks very cluttered to go through the code.
What are the alternatives ?
Some developers like to use some dialog box from javascript libraries like Jquery, Backbone in blocking mode. Though, it will give the necessary functionality, it's an additional overhead in the page.
Each component in the Visualfroce page will generate an Id attribute value. If you specify one, it will be used as the suffix. So, it will be unique for the entire page.
What is the Scope of it ?
Since, the automatic Id generation is based on the parent hierarchy, it will be unique across different components embedded in the same page.
How to refer Component in Visualforce Context ?
In visualforce context, for example in reRender, Status attributes, you can specify the Id value directly.
How to refer Component in Window Context ?
But, in the browser, in Javascript or in HTML page, you should use $Component to refer them. Because, that will give you the automatically generated Id.
Where it will be useful ?
It will be useful when you want to refer them in Javascript or in HTML tags or even in CSS. you can use them pretty much anywhere in the page to refer them dynamically.
Where is the code ?
I have illustrated the example to show $Component being used in HTML, CSS & Javascript to refer the components dynamically
pageblocksectionitem occupies half width of pageblocksection area. Then, it can contain two values, normally one for field value and another one for field label.
How can we use it to insert empty cells ?
if you don't put any field label or field value inside pageblocksectionitem tag it will insert empty cells.
Where it will be useful ?
This will be useful in scenarios when you want to show empty space, rather than showing some field values in form, mainly in Inline pages in Page Layout.
Any other techniques to use ?
you can use inputHidden or style="display:none;" on the element to hide. But, it depends on the use case, if you want to leave the cells empty or you want to just hide the fields.
Where is the code ?
I have illustrated an example where there are empty spaces in right & left section in the pageblocksection.
It is the boundary of components in the page which is marked for server processing. At beginning it may not be clear. Let me explain.
When you send a ajax call to server(via a action function), it performs following 4 step process in nutshell
All the params inside the form tag, sent in Post Call to server & assign to Controller params & basic validation happens.
The action function gets executed
The Page gets rerendered with new Controller values in server side (this will happen always).
The rerendered page will be sent to browser. Then, browser will update only the portion of the page matching rerendered Id's (if no rerendered id's, then entire page will be updated)
When to use ?
When the page is too big will so many input elements, the page will get really slow. If you diagnose the issue, the time will taken more in step 1 above.
So, you need to use actionregion to improve the performance.
Why it is useful ?
When you mark a region as actionregion, then only that region gets processed in server side, i.e step 1. Let's consider an example, you have a very huge page with 100 input fields. Then, you have a button which will call a action function to check just one input field is empty or not. Do you think, for this call, server need to all 99 fields all over again. Its of no use, so, simply waste of time. Solution - The solution is to just wrap that single Input element & button inside a actionregion, so that it will avoid rendering other elements & you get the response back very quickly.
Where is the code ?
I have illustrated this with a small example where you show one field inside actionregion & one outside it. Then, when you click the button, one gets validation message & other one gets ignored (as it is outside region)
Modular architecture is the best way to ensure system is well organised and encourages the re-usability. As per the basic rule, No two lines in the entire code base should be same. That means that, there's a possibility of re-usable code.
What is Templates ?
When the skeleton/Layout (or) group of sections gets reused in different pages, it could be put in a template page. Then, that can be used to build different pages. Most common use for those templates is that brand header, brand footer or Side Navigation Menu, etc.
Where is the Code ?
This code illustrated how a template with Header, Content & Footer is created. Then, how it is used in another page, by including its content.
What is Components ?
Component is the building block for any pages. It's one more technique to ensure the re-usability. The more custom components we include in the page, the more re-usability we can achieve.
Where is the Code ?
This example illustrates how to include the component in the page.
When to use Templates vs Components ?
When the Outer Layout gets repeated in pages, try to put them in the Template. When the inner isolated sections gets repeated in pages, put them in components & reuse them.
The values are passed to Component in runtime which means the values are assigned/type checked during execution.
How primitive types are handled ?
The primitive types like String, Number, Date passed to the Component as value. That means, when the client Page changes the value, component won't be affected.
What is the problem ?
Like some programming languages, developers expect the primitive types to be pass by reference. So, that they can change them in the called page any time, to reflect the changes in all the component using them. But, it doesn't work that way.
What is the solution ?
The solution is to use a Custom Class which will act as a wrapper/container for the primitive types.
Where is the code ?
This example illustrates how to pass a DateContainer object to the Component, so that when its value changed in the client page, it gets automatically changed inside the component.
Standard controller is nothing but a standard object which will give access to sObject & all its standard actions. So, this will be applicable to both standard and custom controller.
What fields are included ?
When you load a page for a record by passing id value, standard controller doesn't load with all the fields for the record. Because, that is unnecessary. So, it will fetch only the fields used in visualforce page/components tree.
What are all the ways to include fields ?
So, either you can add the fields in the page using any standard output/input tags (or) you can use addFields() API in standard controller to pass the list of fields in the controller/extension side.
What is the easiest way ?
But, when you don't want to actually display the fields, but what them to process something in Apex Controller/Extension, you could do one of the following trick to force include,
OutputField/inputField with rendered=false
use inputHidden
Where is the code ?
The following example used OutputField & inputHidden tag to actually force including the fields in the Standard Controller.
I haven't seen many developers using variables that often. It's created using variable tag. It could be used when you have a very lengthy variable names (or) complex Function output (or) lengthy relationship chain to access parameters in controller/extension.
What is the advantage of it ?
It has all the advantages that a variable has in a programming language.
A common place to access it's value
No need to change it in all the place, if we ever want to change it
We can give a meaningful variable name
Code looks clean
Improve maintainablity
How to use them dynamically ?
We could either assign the variable name statically like this,
<apex:variable value="{!$CurrentPage.Name}" var="current_page_name"/>
or dynamically like this which means the varname could be any value dynamically assigned from anywhere. <apex:variable value="{!$CurrentPage.Name}" var="{!varname}"/>
Where is the code ?
This is the illustration of showing static variable assignment. 'TodaysDate' is a controller parameter. But, you can dynamically, changes its value in the component using variable assignment. you can see that in the code below,
A component can take any form of data that could be either System defined type or custom type. So, that will cover most of the use case for components. But, as a bonus, you could pass ApexPages.Action type, which will be invoked during specific event inside the component.
How to do it ?
you need to add a attribute tag which will take the ApexPages.Action type & store it in a variable. Then, when some event happens in the component, it invokes the action.
Where is code ?
I have illustrated the simple action passed to a controller which will call this when user changes the value in the text field.
Each company has its own taste for their styles in web pages. It depends mainly on their brand logo, color, symbols, etc. So, as a developer, you need to follow a consistent approach while styling the components in the pages.
How to reuse standard styles ?
In salesforce, you could reuse the standard/custom object styling in the custom pages. This is done through tabstyle attribute in the page tag.
How to follow consistent styles across pages ?
Create a css file called Common.css & upload it into a Static resource. Then, in this file, have all the common styling classes into it.
For example, you could have a class for all these following components.
Text Box
Label
Select Box
Date Picket
Option Box
Buttons
TextArea
Image
Section Header
Then, in each page, you can simply include common.css & use the classes, rather than rewriting the styles every time.
What are all the ways to set properties from Page ?
When the page loads, you can have a action method which will initialize the parameters in the Controller. So, that's the only way to set parameters, as most of the developers know.
What if you cannot edit Controller ?
In some cases, you can't edit Controller, because, there might be some policies in your company to create a new ticket, etc. Or simply you can't because, you need to write more Apex Tests, if you want to deploy changes in Controller.
Is there any other way to set parameters only by changing page ?
yes. When the page gets loaded, after initializing Page's Controller object & all Compenents Controller Objects, Salesforce initializes all Components. That means, we can use that step to set parameters. It may confuse a bit, but, after looking the code, it will be very easy.
Where is the code ?
For illustration, i have controller with 2 property. Then, a component which will set the property with the value. Then, in the page, we use that component along with the attribute name to assign the value.
Can i change look & feel of Standard UI Components ?
yes. visualforce standard tags renders into standard HTML tags & apply some standard styles to it which user can change.
How to change the styles ?
There are three ways developer can change the styles
By changing the styles of standard HTML tags through CSS. For example, input { font-size : 20px; }will make all input elements in the page to take effect.
By Inline. Most of the tags provide 'Style' attribute which will accept inline styles.
By Style Class. Most of the tags provide 'StyleClass' attribute which will accept a style class name. This is the most preferred method, as it provides more control & keep the code clean.
Where is the code ?
I have shown the illustration of how to use the styleclass in various input, output & navigation components. By doing so, we could change the whole look and feel of the page to any custom design clients looking for.
Is there a customization section common to all Apps ?
Yes. Salesforce provides sidebar for this purpose. This sidebar is nothing but a collection of standard & custom components. Standard components include Create New, Recent Items, Tags, Custom Links, Recycle Bin.
What is allowed inside a sidebar component ?
you can have one of the following types for a component,
Links
Image
HTML
Visualforce
How can we use visualforce ?
Most of the time one can use visualforce to build a sidebar component for one of 3 purposes,
Output Stats, Quotes, Reminders, Important messages etc
Input a value from user & take action in Apex
Set of links for Navigation
Where is the code ?
I have given code for illustrating all these use cases. To try this out,
1) you need to create a new 'Custom Component' under Setup -> Home -> Home Page Components.
- with 'visualforce' type, height 200px, narrow type
- select the visualforce page (copy the code from below)
2) Then, you need to add this new component into current Home Page Layout.
