Technical Architect - Easy Guide - Series

Want to become a Certified Technical Architect (CTA) ?

I know that many Salesforce Developers & Admins want to pursue their career toward Architect role in Salesforce Platform. Though, they might have some experience, it's quite hard to get CTA. The main reasons are,

1.   Wide Knowledge
2.   Many points to remember
3.   Many subjective ideas/decisions
4.   Need of Communications skills
5.   Expensive & Time consuming
6.   Less Community Support

How i'm going to address these problem ?

      1) Wide Knowledge

Information are scattered around the web in Salesforce help manual, blogs, videos, webinars etc. I'm going to bring everything in one series of blog posts.

      2) Many points to remember

I'm going to present the information in more interested ways. So, it will be easy to digest & remember.

      3) Many subjective ideas/decisions

The information which has assumptions, considerations, limitations will be highlighted to give more readablity & clarity to the user.

      4) Need of Communications skills

There will be a section to improve communication specifically for Technical Architect role. So, going through them will help anyone master the skills.

      5) Expensive & Time consuming

I can guarentee that i will make sure that time taken by going this course will be the shortest compariing to other methods/resources. When you acheive the CTA is less possible attemtps, you will save a lot of money.

      6) Less Community Support

This basic intention of this blog is to give a collaboration support among CTA & those who want to achieve it.

How to follow this ?

I'm going to post series of topics in this blog & also in my youtube channel. So, either subscribe to my blog (or) youtube channel

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 34 - Build own Alert Box

What is alert 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.

Where is the code ?

Any screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 33 - Show error for any Input fields

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.

Any screenshot ?

Walk through in video ?

Visualforce - Beyond Basics Series 32 - How to handle error properly

What could go wrong with Visualforce Code ?

When the visualforce page renders in UI, it goes through different layers of processing,

1.   Controller/Extension Object Creation for page
2.   Invoke Action method for Page
3.   Controller Creation for Component
4.   Initialization of Components
5.   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,

1.   Top section in the page
2.   Above any group of components
3.   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

Any Screenshot ?

Can you walk through in video ?

Visualforce - Beyond Basics Series 31 - Use Custom Labels for Global reach

How is the language support from salesforce ?

Salesforce support following three model of language support,

1.   Platform only support - It translates everything in the platform to your own language.
2.   Setup Object support - It translates the setup related Object names & labels & instructions to your own language.
3.   End User support - It translates only the End user view to your their own language.

One's language is determined by the Language setting in 'Language & Time Zone' under your profile

What is Custom Label ?

The translation bench is a place where you give a map of label with different values in different languages. Its nice simple concept. But, it's very powerful. It works well with even managed packages. It gives power to Admin to edit them when they want to.

How it works ?

In visualforce, instead of hard coding labels,  it best advised to get the label value from Custom Labels. So that, it gets translated automatically if its configured in Custom Labels.

Where it will be useful ?

It will be useful in following scenarios

1.  your Org users are geologically segregated across globe
2.  when your end user is not proficient with English & want to give their native support.
3.  when you develop an App for international market
4.  It's not designed only for supporting languages other than English. Even, you can have a translation for English, by which you give power to Admin to change them later if they wish to. I normally use this in all my projects.

Where is the Code ?

I have illustrated with the example of how to display the label name in native language(Hindi).

Visualforce - Beyond Basics Series 30 - Use FieldSets for FutureProof

What is FieldSet ?

It is nothing but grouping the related fields in the sObject & giving them a Name.

What is the use of it ?

Since, it's a group of fields it can be used as a collection, rather than individual fields. At beginning, it may seems not required, but as organization grows, this feature is very important to maintain the Org health.

Where should be used ?

This will be used mainly in Visualforce & Apex. For example, you have created a feature which requires 100 fields to be processed by the user. Would you be happy to add inputField/outputField in the Visualforce page for all 100 fields ?  Won't you think is there any better way ?
yes, fieldset is the solution. you just fieldset to iterate through the fields & use them. These are the usefulness,

1.   efficient coding
2.   less maintainance
3.   future proof - you can add a field or remove from the fieldset, but doesn't need to change the page.

How to use it ?

In visualforce page, you normally use repeat component to iterate through them & then, either input/output the values according the requirements.

Where is the Code ?

I have illustrated how to use a fieldset to iterate & display the values in the page. you need to create the fieldset before running the page.

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

Visualforce - Beyond Basics Series 22 - Use Static Resource effectively

What can be included in Static Resource ?

Static Resource can have any items that a webpage use. These are the possible items,

• CSS
• Javascript
• Image
• Icons
• Flash
• Audio
• Video

How to use them efficiently ?

I have seen some clients using them very ineffectively, by having duplicate libraries in different static resource files. Its best to avoid duplicate resources as much as possible, as the total size for all Static Resources is limited as per Salesforce Edition.

What are the advantages ?

These are the advantages,

•    Resource are cached
•    Easy maintainance
•    No code update

What is the best practice ?

I have seen companies using the static resources one per feature or functionality. In long term, this is overloaded & too many features start using same resources & gets duplicated.

So, the best practice is to have ONE ZIP file each static resource. Then, it will be used across different pages. This is the best method i have practiced & advised to my clients.

Visualforce - Beyond Basics Series 21 - Use Templates, Components effectively

How to enhance re-usability ?

Modular architecture is the best way to ensure system is well organised and encourages the re-usability. As per the basic rule, No two lines in the entire code base should be same. That means that, there's a possibility of re-usable code.

What is Templates ?

When the skeleton/Layout (or) group of sections gets reused in different pages, it could  be put in a template page. Then, that can be used to build different pages. Most common use for those templates is that brand header, brand footer or Side Navigation Menu, etc.

Where is the Code ?

This code illustrated how a template with Header, Content & Footer is created. Then, how it is used in another page, by including its content.

What is Components ?

Component is the building block for any pages. It's one more technique to ensure the re-usability. The more custom components we include in the page, the more re-usability we can achieve.

Where is the Code ?

This example illustrates how to include the component in the page.

When to use Templates vs Components ?

When the Outer Layout gets repeated in pages, try to put them in the Template. When the inner isolated sections gets repeated in pages, put them in components & reuse them.

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 19 - Include fields in Std Controller

How Standard Controller works ?

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.

Visualforce - Beyond Basics Series 18 - Use Variables in Page

How to use variables in page ?

Visualforce page/component can use,

•   global variables
•   Functions
•   parameters from controller/extensions
•   local variables

I haven't seen many developers using variables that often. It's created using variable tag. It could be used when you have a very lengthy variable names (or) complex Function output (or) lengthy relationship chain to access parameters in controller/extension.

What is the advantage of it ?

It has all the advantages that a variable has in a programming language.

•    A common place to access it's value
•    No need to change it in all the place, if we ever want to change it
•    We can give a meaningful variable name
•    Code looks clean
•    Improve maintainablity

How to use them dynamically ?

We could either assign the variable name statically like this,
<apex:variable value="{!$CurrentPage.Name}" var="current_page_name"/>
or dynamically like this which means the varname could be any value dynamically assigned from anywhere.
<apex:variable value="{!$CurrentPage.Name}" var="{!varname}"/>

Where is the code ?

This is the illustration of showing static variable assignment. 'TodaysDate' is a controller parameter. But, you can dynamically, changes its value in the component using  variable assignment. you can see that in the code below,

Visualforce - Beyond Basics Series 17 - Pass actions to component

What types you can pass to component ?

Custom components can take these types,

• Primitive Types
• sObjects
• Collections (Set, List, Map)
• Classes in System Namespace
•   SelectOption
•   ApexPages.Action, etc
• Custom Class/Interface

How to make component more generic ?

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.

Visualforce - Beyond Basics Series 16 - Use immediate for better performance

What is field validation ?

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.

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 14 - Page not just for tags

What the page can contain ?

In broad sense, visualforce page contains visualforce tags & optionally html, css & javascript. Most developers expect it to contain that standard HTML page contains.

Can it contain other than HTML contents ?

yes. visualforce is not designed to be just the HTML content. It could be following,

•   PDF
•   Javascript
•   CSS
•   CSV
•   MS Word

It could be any type that W3 standard supports.

How to achieve that ?

we need to pass the content type attribute to the page tag. Then, it will expect the content to be in that format.

Where is the code ?

For illustration, i have given the page for csv file & javascript. When you load this page, these pages will get downloaded, because, it's not a html page & cannot be loaded.

   

Visualforce - Beyond Basics Series 13 - Setting property using component

What are all the ways to set properties from Page ?

When the page loads, you can have a action method which will initialize the parameters in the Controller. So, that's the only way to set parameters, as most of the developers know.

What if you cannot edit Controller ?

In some cases, you can't edit Controller, because, there might be some policies in your company to create a new ticket, etc. Or simply you can't because, you need to write more Apex Tests, if you want to deploy changes in Controller.

Is there any other way to set parameters only by changing page ?

yes. When the page gets loaded, after initializing Page's Controller object & all Compenents Controller Objects, Salesforce initializes all Components. That means, we can  use that step to set parameters. It may confuse a bit, but, after looking the code, it will be very easy.

Where is the code ?

For illustration, i have controller with 2 property. Then, a component which will set the property with the value. Then, in the page, we use that component along with the attribute name to assign the value.

Visualforce - Beyond Basics Series 12 - Pass query string using param tag

What is Query String ?

In the URL format after '?', you can pass set of key-value pairs which is called Query Strings.

How to frame Query String in OutputLink ?

OutputLink tag is used to provide the hyper link for a element in the page. If you need to pass Query String, you can use param tag for that.

What is the use ?

By using param tag, we can provide dynamic value, rather than the hardcoded value for Query String parameters. Also, if you have more than one Query String parameters, the code looks very clean by using param tag.

Where is the code ?

I have illustrated through how to pass the parameters through param tag for OutputLink below,

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 ?

Visualforce - Beyond Basics Series 10 - 5 ways to AJAX Calls

What is Ajax Call ?

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,

1. Remote Objects
2. Action Functions
3. Remote Methods
4. SOAP API
5. 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.

Remote Objects

Action Functions

Remote Methods

SOAP API

REST API

A Class used for these examples,

Visualforce - Beyond Basics Series 9 - Quick way to check page access

What is page access ?

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 - Beyond Basics Series 8 - Alternatives to MultiPage design

What is multipage design ?

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.

Visualforce - Beyond Basics Series 7 - Controller polymorphism using init action

What is Constructor Polymorphism ?

It's the method of initializing a object differently based on different context. This is achieved though init action in the page tag.

When it is useful ?

In many cases, you need to share the controller, extension between different pages/components. But, it wont be possible if the object is initialized with default set of values. So, you may need to initialize the object very differently for different cases.

Where is the code ?

I have a Class in Apex which will be shared among two pages. These pages will initialize the object differently. This is just a basic case, but, it could initialize or perform certain logic & make the object look entirely different.

Visualforce - Beyond Basics Series 6 - Use styleClass like a pro

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

1.   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.
2.   By Inline. Most of the tags provide 'Style' attribute which will accept inline styles.
3.   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.

Visualforce - Beyond Basics Series 5 - App agnostic widgets in sidebar

Is there a customization section common to all Apps ?

Yes. Salesforce provides sidebar for this purpose. This sidebar is nothing but a collection of standard & custom components. Standard components include Create New, Recent Items, Tags, Custom Links, Recycle Bin.

What is allowed inside a sidebar component ?

you can have one of the following types for a component,

1.   Links
2.   Image
3.   HTML
4.   Visualforce

How can we use visualforce ?

Most of the time one can use visualforce to build a sidebar component for one of 3 purposes,

1.   Output Stats, Quotes, Reminders, Important messages etc
2.   Input a value from user & take action in Apex
3.   Set of links for Navigation

Where is the code ?

I have given code for illustrating all these use cases. To try this out,
  1) you need to create a new 'Custom Component' under Setup -> Home -> Home Page Components.
        - with 'visualforce' type, height 200px, narrow type
        - select the visualforce page (copy the code from below)
  2) Then, you need to add this new component into current Home Page Layout.

Visualforce - Beyond Basics Series 4 - actionpoller is your timer

How to perform timed action ?

if you need to fire action method calls (ajax calls to server) periodically, just like a timer, you need to use actionPoller tag. This will call the action methods at regular intervels & rerender the section of the screen(optionally).

Where is the code ?

The actionpoller tag can be illustration with following example. This updates the userRetries count everytime it sends the request to server. Finally, when it reached 10 times, it quits.

Precautions ?

you need to keep following things in mind, before using this tag

•   Since, this calls repeatedly by itself & can run very silently in browser, it should be used only if it's required.
•   One advantage of using this method is that it keeps the session alive & user login cannot timeout.
•   The best practice is to avoid heavy DML, Call out, Trigger logic through it.

Visualforce - Beyond Basics Series 3 - Pass params to action methods

What is action methods ?

After the page load, we can send requests to server asynchronously to perform some actions which is called action methods. This is achieved by sending POST request along with necessary parameters in headers.

When it will be useful ?

This is useful in cases where user needs to take small actions & update the small portion of the screen without reloading the whole page.

How to pass values to action methods ?

We can pass parameters using param tag for these four action tags,

1. apex:commandButton
2. apex:commandLink
3. apex:actionSupport
4. apex:actionFunction

Where is the code ?

Here's the illustration for passing parameters for these four different action methods,

Visualforce - Beyond Basics Series 2 - Use $Action & avoid URL Hacks

What is URL Hacks ?

The technique of reverse engineering standard salesforce URL & using them to build a custom solution.

Problems of using URL Hacks ?

The standard salesforce URL formats & parameters is undocumented. So, it could be changed anytime during standard release or during bug fixes. So, it's better to avoid

How to avoid it ?

Salesforce provides standard ways to access the URL & parameters in Visualforce & Apex. Developers must use them instead of hardcoding the URL's in the code.

Where is the code ?

Instead of using something like '/006/o' to redirect to opportunity tab page, one could use $Action.Opportunity.Tab with the help of URLFOR function to get the URL.

For illustration, i have shown how to get the URL's for create, view, edit delete for an opportunity record

Where can i find more information ?

For more information, you can see the possible action values for all sObjects,
$Action - Salesforce doc

Visualforce - Beyond Basics Series 1 - Tabpanel SwitchType

tabpanel - switchtype

What is it ?

tabpanel tag facilitates tabbed view of the content. The content could be any container tag like div, span, iframe, etc. The 'Switchtype' attribute specifies how the content should be rendered. 

There are three possible ways to render the content,

•   During Page Load
•   When user switches the tab, through full page reload
•   When user switches the tab, through partial page refresh(ajax call)
• 
  

Why does it matter ?

I have seen most of the time, developers don't provide any value which defaults to server type. This will cause full page reload when user switches the tab. This is unnecessary in most cases & an expensive process.

What are the different scenarios to use ?

• Use 'client' if the tab content is very small
• Use 'server' if the tab content is large which will take more time to load during initial page load.
• Use 'ajax' if user changes the tab very often & tabbed content is small proposition of the whole page. 

How to use it ?

This is the sample code illustrating with two tabs for each type. When you run this, you can see that 'client' type will take more time to load. 'server' type will refresh whole page when user changes the tab. 'ajax' type will simply refresh the tab content.

Visualforce - Beyond Basics - Series

What is Visualforce - Beyond Basics ?

I have been working in Salesforce platform for quick sometime now. Most of the time coding in Visualforce and Apex. I have seen various implementations of business use cases across different industries. So, i was thinking to present all visualforce techniques that i have learned to others.

What i can expect ?

I'm going to publish different posts periodically about visualforce techniques one can use in their day to day job. I believe learning something gradually is an excellent way of getting deep knowledge. So, please subscribe to my blog & enjoy reading.

Can i see demos ?

Yes, i have my own youtube channel called 'Nepz Salesforce' where i will show the demo for each posts if required.
Nepz Salesforce Youtube Channel

Can i see the code ?

I will give the code inline in the post. If, it's too big & something needs collaborative development, i will upload them into my Github account & share the link.
Github

What if i have some suggestions/comments ?

you are welcome to provide your suggestions/comments in each post. you can reach me at sankaranid@gmail.com

Maximize Salesforce UI editor for Apex, Visualforce code.

Problem

Have you ever wondered why Salesforce UI editor is so small & you need to keep rolling horizontally & vertically a lot ?

Solution

For a solution, go through my github page,
https://github.com/sankaran1984/salesforce-projects/tree/master/WebUIEditor-Maximize

Say no to crowded buttons in Salesforce Record Detail Page

Problem 

Do you ever face problem like this ?

Solution

I have given a way to cascade buttons in my github page.
    https://github.com/sankaran1984/salesforce-projects/tree/master/ButtonsMenu

This is my frist salesforce blog

Who am i ?

I'm a Software Engineer working in Salesforce Platform for quite some time now. So, i thought of sharing my experience & view about different aspects of Salesforce Platform. 

My Goals ?

I'm aiming to publish posts frequently from now. So, if you subscribe to my blog, you will be notified of new posts/updates. 

If anyone doesn't know, how to subscribe, here you go,