yes, a new community specifically for who's interested in Salesforce in general & more specifically in Apex, Visualforce, Lightning & also in basic web technologies like HTML, CSS & Javascript.
I have been blogging & publishing videos for Salesforce Developers for quite sometime. But, it looks like more of a one way communication. So, i thought to create a community where we actively discuss about various development issues & get to know about each other & help each other. Here's the few things i'm expecting to deliver through this community,
As soon as i reach 10 members in the community, i'm going to schedule a launch event & discuss about the community & chit chat with the people to get to know about each other.
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.
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
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
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.
There few ways to bring the standard styling to the custom visualforce pages pretty easily. They are
using tabStyle in page/pageblock
using detail tag
using chatter tag
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.
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.
