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.
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.
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.
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)
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.
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.
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.
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.
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.
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.
