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 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 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 29 - Reference element using $Component

Is Id attribute really Unique ?

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

Visualforce - Beyond Basics Series 28 - pageblocksectionitem for empty cells

How pageblocksectionitem works ?

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.

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 20 - Primitive types pass by value

How values passed to Component?

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.

Visualforce - Beyond Basics Series 15 - Reuse page styling

How to maintain Unique styles for your company ?

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 - Beyond Basics Series 11 - Format using param tag

Why formatting output ?

Most of the time, you don't want to display the date, string, number in raw format to the User. It has be formatting to different standards & user conventions before displaying to user.

How to Formatting Ouput ?

When you want to format a Date, String,  Number, i have seen developers formatting them in Apex Class & showing them in Visualforce. That is not required, we can use OutputText with param tag to format the output.

What types of data can be formatted ?

you can format String, Date & Number types using OutputText tag

Where is the Code ?