Visualstrap : Using Modals in Visualforce Pages

Friday, June 13, 2014


Modals are part of the Visualstrap from very beginning but I never talked much about them. Modals can be really help to enhance the user experience. They can let you do many things without going to and fro between pages.

In Salesforce, we are used to this type of arrangement. For example have a look at the "New" / "Edit" buttons, they will take you to a another page to accomplish the task. It feels a bit clunky.
To make the experience  fluid and fast these pages can be replaced with modals.

Scenario 

Lets say we want a page where
  • See all the cases
  • Create new cases
The page can be extended to close and update the cases as well

Prerequisite 

The Page & Controller 

The page and controller are pretty simple.

<apex:page controller="VSModals_Con">
<vs:importvisualstrap />
<apex:form >
<vs:visualstrapblock >
<vs:pageheader title="Cases" subtitle="Cases List" icon="file"/>
<vs:panel title="All Cases" type="primary" id="allCases">
<vs:well styleclass="well-sm" style="text-align:center">
<a class="btn btn-success btn-md" onclick="$('#newCase').modal('show');return false;">New Case</a>
</vs:well>
<apex:dataTable value="{!cases}" var="case" styleClass="table table-bordered table-hover">
<apex:column value="{!case.CaseNumber}" headerValue="CaseNumber" styleClass="{!IF(case.isClosed,'','warning')}"/>
<apex:column value="{!case.Subject}" headerValue="Subject" styleClass="{!IF(case.isClosed,'','warning')}"/>
<apex:column value="{!case.Status}" headerValue="Status" styleClass="{!IF(case.isClosed,'','warning')}"/>
<apex:column value="{!case.Priority}" headerValue="Priority" styleClass="{!IF(case.isClosed,'','warning')}"/>
</apex:dataTable>
</vs:panel>
<vs:modal id="newCase" title="New Case">
<apex:outputPanel layout="block" id="newCasePanel">
<apex:pageBlock mode="maindetail">
<apex:pageBlockSection >
<apex:inputField value="{!caseObj.Subject}"/>
<apex:inputField value="{!caseObj.Status}"/>
<apex:inputField value="{!caseObj.Description}"/>
<apex:inputField value="{!caseObj.Priority}"/>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:outputPanel layout="block" styleClass="modal-footer">
<apex:commandButton value="Cancel" styleClass="btn-warning" html-data-dismiss="modal"/>
<apex:commandButton value="Save" styleClass="btn-success" onclick="$(this).button('loading')" html-data-loading-text="Saving..." action="{!saveCase}" reRender="newCasePanel,allCases"/>
</apex:outputPanel>
<apex:outputPanel rendered="{!isSuccess}">
<script>
$('#newCase').modal('hide');
</script>
</apex:outputPanel>
</apex:outputPanel>
</vs:modal>
</vs:visualstrapblock>
</apex:form>
</apex:page>
view raw VSModals.page hosted with ❤ by GitHub
public class VSModals_Con {
public Boolean isSuccess{get;set;}
public Case caseObj{get;set;}
public VSModals_Con() {
init();
}
//method to save the records
public void saveCase(){
try{
insert caseObj;
init();
isSuccess = true;
}
catch(Exception ex){
Apexpages.addMessages(ex);
isSuccess = false;
}
}
//fetch the cases
public List<Case> getCases(){
return [SELECT Id,CaseNumber,Status,Priority,Type,Subject,isClosed FROM Case ORDER BY CreatedDate DESC];
}
private void init(){
caseObj = new Case();
isSuccess = false;
}
}
view raw VSModals_Con.cls hosted with ❤ by GitHub

The Catch

  •  Opening Modal : Modal can be opened using JS or html attribute. In this demo we are using JS
    <a class="btn btn-success btn-md" onclick="$('#newCase').modal('show');return false;">New Case</a>
Closing the Modal Only when insert is success : We cannot just close the Modal when the user presses the Save button because there can be validation errors/required fields missing etc. To control this we are using a controller variable "isSuccess". We are setting it to true only if the transaction was success and based on the variable value we are calling the modal hide on the page.

Controller : This method sets the isSuccess flag to true only when the records is saved successfully.
    public void saveCase(){
        try{
            insert caseObj;
            init();
            isSuccess = true;
        }
        catch(Exception ex){
            Apexpages.addMessages(ex);
            isSuccess = false;
        }
    }

Page : The below section only renders when isSuccess is true ( and lets the page to close only when the save was success )

<apex:outputPanel rendered="{!isSuccess}">
     <script>
         $('#newCase').modal('hide');
     </script>
</apex:outputPanel>

VSModal in action



Below is the live demo of the page, you are welcome to try creating some cases for me :)

Demo Page : http://blogforce9dev-developer-edition.ap1.force.com/VSModals

Posted by at 8 comments:
Labels: , , , , ,

Using Salesforce RemoteObjects with JSRender : Create a stateless Table

Saturday, June 7, 2014


Salesforce has just released RemoteObjects and its really promising. You can now do lot more by just writing a page and without any need of a controller.

RemoteObjects now lets you do DML, Query etc just using the Javascript and to add they are not even counted against the limit. Lets see how can we use the same to create a stateless Pageblock table.

Ingredients 

  • Jquery : For DOM Manipulation
  • JSRender : For templating
  • Some styling

Jquery

Jquery is a very popular DOM manipulation library and if you are into JS you probably don't need any introduction of the same. Jquery in this DEMO does the job of DOM manipulation like picking up templates, changing DOM etc.


JSRender

JSRender is not so popular templating engine which is successor of JQuery Templates. Lot of things have changed from JQuery Templates and they are now much more easier to use than ever. I have been preferring JSRender because they need very less code and are easier to use and understand.


Styling

To give our table a familiar look of PageBlockTable we will have to borrow some styling for Salesforce.

Styling from Salesforce


The Page


<apex:page >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<apex:includeScript value="https://rawgithub.com/BorisMoore/jsrender/master/jsrender.min.js"/>
<apex:remoteObjects >
<!--Name the field you like to query-->
<apex:remoteObjectModel name="Contact" jsShorthand="con" fields="Id,Name,FirstName,LastName,Phone,Email"/>
</apex:remoteObjects>
<script>
//function to invoke the retreive call to query records
function getContacts(callback){
var data = new SObjectModel.con();
data.retrieve({ limit: 100 } ,function(err, result){
//if failure
if(err){
alert(err.message);
}
else {
callback(result);
}
});
}
//function to extract object from the remote object result
function extractObjects(result) {
var objects = [];
for(var i =0; i < result.length; i++){
objects.push(result[i]._props);
}
return objects;
}
//on document ready call query and render the template
$(function(){
getContacts(function(result){
var contacts = extractObjects(result);
//render html
var html = $("#contactTableRowTmpl").render(contacts);
//replace the table body with rendered html
$("#contactTableBody").html(html);
});
})
</script>
<!-- JS Render Template -->
<script id="contactTableRowTmpl" type="text/x-jsrender">
<tr class="dataRow" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
<td class="dataCell">{{>Name}}</td>
<td class="dataCell">{{>FirstName}}</td>
<td class="dataCell">{{>LastName}}</td>
<td class="dataCell">{{>Phone}}</td>
<td class="dataCell">{{>Email}}</td>
</tr>
</script>
<apex:pageBlock >
<!-- Borrow some styling from Pageblock table -->
<table class="list" border="0" cellpadding="0" cellspacing="0">
<thead class="rich-table-thead">
<tr class="headerRow ">
<th class="headerRow">Name</th>
<th class="headerRow">FirstName</th>
<th class="headerRow">LastName</th>
<th class="headerRow">Phone</th>
<th class="headerRow">Email</th>
</tr>
</thead>
<tbody id="contactTableBody">
</tbody>
</table>
</apex:pageBlock>
</apex:page>
view raw RemoteObjects.page hosted with ❤ by GitHub

The end result

Whats Advantage ?

  • Almost zero viewstate
  • Pretty fast loading time and refresh
  • Suitable for mobiles and large pages


Project Link & Live Demo : http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a029000000Dshlu

Posted by at No comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)