For every visualforce page, there's a timout for session, after which the session expires. This is configurable under security controls in Salesforce Setup. Normally, it will be few minutes in best secured Org.
How to prevent that ?
But, practically, you might have a visualforce page which requires more time for the User to work on it. Say, if they take 30min to configure products for an opportunity, then, they were pulled for a meeting. So, when they come back after 30 min & click save, they should be disappointed to see login page & potentially losing all the effors.
To avoid such scenarios, we can use actionPollar to poll for an empty request to server, so that session will be kept alive forever.
QR Code is the visual representation of text. It has very similar attributes to Bar Code. But, it's more powerful than it.
What are the applications ?
The main application is to scan the URL, rather than typing in the browser. And embedding Contact details, Product details for the Business.
How it will be useful in CRM System like Salesforce ?
In Salesforce, we may need to get the QR Code from external system containing lead information (or) Contact Information (or) Cases. In return, we may send QR Code to other systems which accepts the data in QR Code format. Barcode/QR Code has very important role in every business. So, converting the format between QR Code & text is vital for a Organisation.
How to implement the feature very quickly ?
It's not necessary to implement the complex algorithms required for processing QR Codes. As there are services available in the Cloud, we could reuse them.
How normally inlineEdit implemented in Visualforce ?
The best way to achieve inlineEdit for fields in Visualforce is using mode = 'InlineEdit' in PageBlock tag. This is the best and efficient way to do it. However, there's only one inconvenience, it opens up only one field for editing.
Then, user needs to click on each field to edit. So, what if user wants to edit all the fields in the row ?
How to edit all the fields in the row ?
When user double clicks a field in the row, then redirect to the same page with a Query Parameter that determines which row should be opened for Editing.
In Standard record Edit Page, there's no way we can hide/show a set of Fields for Users to Fill In. This is the big issue when you have hundreds of fields that gets presented to the User.
How to solve with visualforce Page ?
In visualforce page, this problem can be solved by showing/hiding different sections based on the 'certain value' in Fields (or) certain User Action.
Using apex:inputFile tag, we can upload a file & store that as the attachment to the record. The master record id should be assigned to parentId for the Attachment.
What is the traditional way ?
Traditionally, developers use the same styling of inputFile as it is. That means there will be an upload button for user to select the file & there has to be a commandButton/commandLink to call the action function.
How to transform that to modern look ?
But, in a modern Upload button solution, a Upload label will be styled as a Button. Then, the inputFile tag will be inside the label & hidden from user. So, user will see only Label(Button), not the acutal inputFile.
Where is the Code ?
Here's the code that illustrates the traditional method & more modern method to upload the file.
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.
Is there any standard way for displaying error message for a field ?
When a controller/extension (Or) Trigger uses addError method in Sobject field, it will be displayed under the field in the Visualforce Page.
What about non-sobject field ?
But, if the input field has binding through a non-sobject variable, then there's no standard way of displaying the error message under the field.
How to show them ?
The error message has to be displayed manually.
Where is the code ?
I have illustrated by simply adding error message in a map in Controller, Then, in Visualforce page, if there's an error, the error message will be displayed.
When the visualforce page renders in UI, it goes through different layers of processing,
Controller/Extension Object Creation for page
Invoke Action method for Page
Controller Creation for Component
Initialization of Components
Rendering each binding variables
In above steps, the error could happen in any step. It could be due to Invalid Data (Or) Improper handling of invalid data (Or) Developer induced error to User.
What are the places to take more care ?
One need to take more care in following cases,
Handling null values - To avoid, initialize all variables in Constructor or at declaration.
Handling mathematical exceptions - To avoid, careful about divide by zero cases
Handling Network exception - To avoid, always try-catch CalloutException
Handling DML exceptions - To avoid, always try-catch DMLException
Handling NoDataFound exception - To avoid, always try catch Soql query section
There are many other possible cases, but i have highlighted common cases above.
What are the ways to report error ?
Between controller & visualforce page, there's one way of error communication which is through ApexPages.Message
How to handle them gracefully ?
Ideally, there should be no unhandled exception. In that case, salesforce will throw the raw error to User without proceeding after the error.
Where can the error be reported in UI ?
It can be reported in following places in UI,
Top section in the page
Above any group of components
Exactly below the component
Where is the Code ?
I have illustrated on few ways of reporting error in Controller & also ways to display them in visualforce page
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)
Loading different contents of the page after the initial page load is called Lazy loading. This is contrary to most common method called Eager Loading.
Why should i care about ?
When a developer starts to build a page for a Org, they might have few requirements. But, as days pass on, they may get more requirements from customers & keep adding features one by one. Most of the time, Controller needs to do heavy lifting during its construction, that means it will have more logic placed inside constructor. This will make page loading time way high & gives very bad performance.
Where it will be useful ?
When you want to make Heavy DML calls involving huge number of records or having complex Apex processing, then, it's bad idea to have that logic in constructor.
How to do it ?
Ideally, Constructor should be used to initialize the objects to bare minimum, that means just initializing to empty object. In another view, it must have only logic to display very minimum components to the user, other stuff needs to be handled through separate action functions.
For example, if you are displaying Table of data, its better to use pagination with small number of records set number. If you are displaying record details, you can display overview information & fetch more details if user press for 'more details' button/link.
Where is the code ?
I have illustrated a example, where i need to fetch list of closed opportunity number. This is very intensive Soql call, as it needs to look through all records in the Org. If i do that in Constructor, it would take few seconds to load the page. Since, i did in action function, user will wait knowing that why its taking more time(by looking at the loading status message).
The action functions are invoked normally from visualforce page after the page has been loaded. This could be from page init action, button action or any call directly from Custom Javascript.
What cascading action function means ?
If you have a action function associated with Button & you want to take some more action once its completed. And you could continue doing so for any number of times.
What is the benefit of doing so ?
I have seen developers cramming so many lines of code inside the action function, mostly for Button actions. Because, as the requirements keeps growing, developer keeps adding so many logic inside same action function. Instead, you can have many smaller action functions & call one after another depending on conditions.
Where is the code ?
For illustration, i have a button which will invoke a action function. While its invoking action, it also specify what is the next action will be. So that, after the call, the next action function gets called.
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.
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.
As you know each input field in the page will be associated to some SObject/Controller parameter with some datatype like String, Date, Number, etc. So, When user fills in the data & submits it, visualforce performs some basic integrity validation to check if field datatype matches the value. Also, it performs requiredness check.
When it is performed ?
This will be performed only when user submits the form with either button click or custom action in the page.
Is it possible to skip that ?
When you submit form, if you are not going to send the values to the server, there's no point in validating them. So, it is possible to skip the validation step by immediate attribute in action functions like,
CommandButton
CommandLink
ActionSupport
ActionFunction
ActionPollar
What is the advantage of it ?
This will improve the page performance which means that page gets updated quickly. And if you use this very often, the net performance is quite high.
Where is the code ?
In this example, you can see that i have used immediate for Cancel button. Because, while cancelling, we are not going to send any form data to server, so, there's no point of validating it.
After the initial page load, the client(browser) can interact with server asynchronously without page reload/redirection. This method is called AJAX technique. Its quite popular in modern web practices.
Why is it necessary ?
To build single page applications(SPA), we need to handle the interaction with server( POST calls) asynchronously & optionally update the portion of screen without full page reload. In order to achieve that AJAX calls are required.
What are the ways to achieve it ?
There are 5 ways one can use Ajax call in Visualforce,
Remote Objects
Action Functions
Remote Methods
SOAP API
REST API
Where is code for each one ?
I have given example for each type, achieving the same result, i.e all the examples fetches 10 Opportunity records & display them in a div tag asynchronously.
In salesforce, we can apply security to visualforce pages based on profiles.
How to enforce them in visualforce ?
It's is enforced automatically when user tries the access the restricted page. But, if you want to identify the access before you redirect the user, there's a solution for that.
How to do that ?
Apex profile getContent() method on PageReference class. This applies the profile permissions before returning the content. So, we could use that to determine the access.
Where is the code ?
For illustration, i have given a textbox to accept the page name & then check the access based on that.
visualforce is a multipage architectural design system which means that you need to design you application by building set of Pages aiming to use shared components & controller/extensions efficiently.
What is the problem with that design ?
Since, visualforce doesn't have a app specific namespace or a folder structure to isolate the application specific pages, it's difficult to maintain them in long term.
What is the solution ?
The solution is to keep the number of pages as less as possible, but still reusing components, controller/extension appropriately. This is in other words called Single Page Application(SPA).
How to do that ?
This is achieved through using 'SectionName' in the controller & displaying different sections in the pages, according the user navigation.
Where is the code ?
I have illustrated this technique using a Apex controller which will have the current section name. When the page navigates to the new section, it updates the section name in the controller & appropriate section gets rendered. By doing this, you avoid having different pages for different sections in the App.
