Visualforce - Beyond Basics Series 50 - Easy Global Search

What is Global Search ?

In Salesforce, there's a standard global search functionality at the top Header. This will search all the text, email, phone fields in Objects & list them.

How to implement one ?

If you want to implement one, it's simple to do so. we need to use SOSL for fuzzy search on fields in specific objects.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 49 - Mark a table column as Required

How to give help text for a Table ?

In visualforce, table can be generated using PageBlockSection, PageBlockTable, DataGrid tags. If one wants to provide help text for a column, they need to use apex:facet tag.

How it will be useful to indicate Required Field ?

In some cases, developer may want to indicate a column as Required. So, it's possible to provide that in the table column header

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 48 - Required field Help Text

How to give more emphasis on Required fields in form ?

Prevention is better than Cure. Most of the time users forget to fill in required fields in the form & realize than while saving the record.

How to prevent that ?

Giving a highlighted Help text through each section of the forms would give more emphasis on required fields. By doing so, user will fill some values & will never have any issues while saving the record.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 47 - Extend standard sObject

What is the purpose of extending the sObject ?

There's no inheritance to standard sObject. So, if one wants to extend the record, one need to create a wrapper to store the record inside it.

How to do that ?

The wrapper is a Apex Class which will have the record and other extended fields. So, in visualforce page, both standard and extended fields can be used seamlessly.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 46 - Treat each User differently

What is Personalization ?

Sometimes Visualforce page needs to behave or look differently for different set of users. This is called Personalization.

How do achieve this ?

In salesforce, we can use 'Custom Settings' to store the personalization data for User, Profile or entire Organization. We need to be very careful in not misusing this. If any data that does n't different between user, then it's App Configuration which should be stored in 'Custom Metadata'.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 44 - Inline VF Page Redirect

What is Inline VF Page ?

Inline Visualforce page means, a technique of embedding visualforce page into the main detail/edit page of standard layout for a record.

How to redirect or refresh the page ?

This inline VF Page lives inside a iframe. So, when you do redirect or reload. the detail/edit page won't get affected. you may try this now, if you haven't faced this.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 43 - Use QR Code in Page

What is QR Code ?

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.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 42 - Inline Edit with No Apex

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.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 41 - Dynamic Forms

Issue with Standard Forms in Salesforce ?

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.

Where is the Code ?

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 40 - Static Resource is not the only one

Where do you normally store resources in Salesforce ?

As a developer, we know that most of the resources for projects like images(icons, labels, loaders), javascript, css files is Static Resource. But, there are few different areas in salesforce we could leverage.

What are the specific purposes for different areas ?

These are the different areas where you could store resource & use them in your visualforce page.

Static Resource

Like the name suggests, one should store the resources that is a static one which doesn't change over the course of time. So, all images, css/js files which has a very stable version should be stored in it.

Tips :

1. One tip is that Org should maintain a proper repository for their static resources & avoid duplicates among the resources. For example, i have seen jquery, loader images all over the static resource packages. This is very ineffective management for the storage space allocated for static resource.
2. Another tip is to not create package per projects. This will lead to contain duplicate resources. Rather than, better maintain static resource per resource like JS, CSS, LOGOS, LOADERS, etc.

Notes & Attachments

If the resource like Text Documents (rtf, msdoc, csv, pdf, css, js, etc), Images (jpeg, png, gif), videos (flv, avi, mp4, etc) are attached to any Standard/Custom objects like Account, Contact, etc, we could leverage that & use those in Visualforce Pages.

Example :

For example, recently, i have built a visualforce page that displays the product image for an account. I could have uploaded them in static resource. But, its specific to the Account, so i have added them to Notes and Attachments & used them in visualforce.

Documents

This is the storage area one should use when the resource is not associated to any Object. If it's a single file that is slightly large one, could easily fit in this area. One more advantage is that not only developers, admins can also share this space.

Chatter Files

This is the storage area shared between chatter users, admin & developers. But, one should use this space only if the visualforce page is related to chatter functionality. Otherwise, there's no guarentee that this resource will exisit, as any chatter/admin could modify/delete this resource.

Hosted External

This is the technique of storing the resources outside Salesforce. This is also a efficient method, as there are so many reliable systems out there today for each resources.
         Javascript  - Google hosted resources, JQuery, Angular, etc
         Images      - Github, Flickr, etc
         CSS          - Google hosted resources, Bootstrap, W3.CSS, etc
         doc           - Google docs, etc

Where is the Code ?

For illustration, i have shown the images from 'Static Resource', 'Notes and attachments' & Documents.

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 39 - Modern Upload Button

How to upload an attachment to record ?

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.

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 38 - Show Custom Popup

How to show a popup ?

A popup dialog will be very useful in cases where an temporary information needs to be shown to the user for either user Input/Output.

How to load a  page in popup ?

There's no standard popup techniques in Visualforce. So, we need to create a custom Popup & load a visualforce page on that using window.open API method.

How to interact with popup & parent page ?

From the popup, its possible to interact with parent page in two ways,

1.   By manipulating parent DOM directly.
2.   By triggering events to parent body component

Where is the Code ?

I have illustrated the custom popup through  a parent page where we have a Text Field that will be populated when the user selects the account in the dialog box.

Any Screenshots ?

Parent Page

Custom Lookup Dialog box

After user selected,

Walk through in a video ?

Visualforce - Beyond Basics Series 37 - Let user know what is happening

How much patience user has ?

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,

1.   Start & Stop Text Message
2.   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.

Any Screenshots ?

When the request sent,

After the response received,

Walk through in a video ?

Visualforce - Beyond Basics Series 36 - Action for Lookup Dialog

What is Lookup dialog ?

All parent relationship field which is of type lookup can be changed using the standard inputField tag on them.

How can we take action after the Lookup ?

When user selects some value for the parent relationship, we may need to take some action, perhaps a validation (or) confirmation action to the user.

Where it will be useful ?

We could use this for validation purposes or rendering different section of the page based on the value selected, etc.

Where is the Code ?

The code will illustrate how to take action after the lookup value changed & update different section of the page based on the new selected value.

Any Screenshots ?

When loaded

After lookup

After value changed

Walk through in a video ?

Visualforce - Beyond Basics Series 35 - Build own Dialog Box

What is dialog box ?

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.

Any Screenshots ?

After clicking 'Show Dialogbox'

After clicking 'OK'

Walk through in a video ?

Visualforce - Beyond Basics Series 27 - style using mode in pageblock

How to bring standard styling in VF Pages ?

There few ways to bring the standard styling to the custom visualforce pages pretty easily. They are

1.  using tabStyle in page/pageblock
2.  using detail tag
3.  using chatter tag
4.  using mode in pageblock

Where it will be useful ?

When one needs to develop a page that mimics the standard detail page, they should above techniques to bring the same styling as the standard pages. Also, it will be useful in inline visualforce pages embedded in page layouts, otherwise, it will look weird with other standard sections in the page.

How to use it ?

There's an attribute in pageblock called mode, which accept values like detail, maindetail, Edit, InlineEdit for giving different behaviour to the standard styling.

Where is the code ?

Here, i have illustrated different modes for the pageblock & demonstrated how it will be visible in the page.

Visualforce - Beyond Basics Series 26 - build a standard page easily

What i mean by standard page ?

I mean the standard detail page for salesforce records, Its easy to recreate standard details page in visualforce.

What are the common use case ?

1.  When you want to build a detail page but doesn't want to show any related records
2.  When you want to show the detail page in tabbed view or any custom view other than the standard vertical layout.
3.  When you want to show the detail page showing fields from parent/child relationship

How to do for inline pages for Page Layout ?

When you embed an inline page in the Page layout, if you use mode="maindetail",  in the pageblock tag, then you will see the detail fields with same styling as in standard page. Also, it support inlineedit by passing specifying mode="inlineEdit"    

Where is the Code ?

I have illustrated the concept by building a quick page resembling the standard detail page for opportunity.

Visualforce - Beyond Basics Series 25 - action region for multiple forms

What is action region ?

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

1.   All the params inside the form tag, sent in  Post Call to server & assign to Controller params & basic validation happens.
2.   The action function gets executed
3.   The Page gets rerendered with new Controller values in server side (this will happen always).
4.   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)

Visualforce - Beyond Basics Series 24 - lazy load the page

What is Lazy Load ?

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

Visualforce - Beyond Basics Series 23 - Cascade Action Functions

When Action Functions used ?

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.