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 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 ?