Salesforce Translation Workbench using Visualforce

09:12 4 Comments A+ a-

Hi Everyone,

I created a registration form in which you can change language according to you and then all content on form will display in selected language. I did this using 'Translation Workbench' feature of salesforce. I added 5 languages (English, Spanish, Arabic, Hindi, Chinese). You can add according to your requirement.

 
How to set up Translation Workbech:
1) In search panel on left side of salesforce org, type 'Translation Settings', First time, you will have need to enable translate workbench then you can 'Add' any language which one you want. You can also select users who can use that language.



2) Again in search panel, type 'Custom Labels', here give api name of label and value in English (default is English).



3) Into above create label, into 'Translations' section, create new, select language from picklist and into 'Translation Text', place converted text in selected language.



4) Your label is ready and you can use this label on your visualforce page like that '{!$label.firstname}'.



How to view form:

1) You can select language using 'Select Language' dropdown on this form.
2) All form contents will be change into selected language.
3) After 'Submit' form, a thanks message will be display into selected language.
4) When close Thanks message, again it will redirect to main form.

Form in 'Chinese' :

Form in 'Arabic':


Submit message in selected language, for example, I selected 'Spanish' and fill form and click on 'Submit':
'WorkbenchContact' Visualforce Page :


<apex:page sidebar="false" showHeader="false" standardStylesheets="false" language="{!langu}" controller="WorkbenchContactController" docType="html-5.0"> <head> <!--js and css files--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" /> <script src="https://code.jquery.com/jquery-1.11.3.min.js"/> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/css/bootstrap.css')}" rel="stylesheet" /> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/dist/jquery.bootgrid.css')}" rel="stylesheet" /> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/modernizr-2.8.1.js')}"></script> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/bootstrap.min.js')}"></script> <title>Contact Registration Form using Workbench</title> <style> .msgpanel{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; margin-top: 250px; margin-left: 300px; } .panel-primary> .panel-heading { font-weight: bold; } .list{ width: 20%; margin-left: 430px; } .pick{ margin-left: 150px; } .menu{ text-align: center; cursor: pointer; color: #428bca; font-weight: normal; } .pull-left { margin-top: 10px; } .btn-danger { margin-left: 10px; } .fontcolor{ background-color: #eee; color: #428bca; } .vertical-center { min-height: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; display: -webkit-flex; /* For Safari */ -webkit-justify-content: center; /* For Safari */ -webkit-align-items: center; /* For Safari */ } </style> </head> <apex:form > <apex:actionFunction name="setEng" action="{!changeToEnglish}" immediate="true"/> <apex:actionFunction name="setChin" action="{!changeToChinese}" immediate="true"/> <apex:actionFunction name="setSpan" action="{!changeToSpanish}" immediate="true"/> <apex:actionFunction name="setArabic" action="{!changeToArabic}" immediate="true"/> <apex:actionFunction name="setHindi" action="{!changeToHindi}" immediate="true"/> <div class="vertical-center"> <div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="pull-left"> <h3 class="panel-title">{!$label.personal}</h3> </div> <div class="pull-right"> <ul class="nav nav-tabs"> <li role="presentation" class="dropdown" > <a id = "drop" class="dropdown-toggle fontcolor" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" > {!$label.lang} </a> <ul class="dropdown-menu" aria-labelledby="drop"> <li onclick= "setEng();"> <div class = "menu">English</div> </li> <li onclick= "setChin();"> <div class = "menu">Chinese</div> </li> <li onclick= "setSpan();"> <div class = "menu">Spanish</div> </li> <li onclick= "setArabic();"> <div class = "menu">Arabic</div> </li> <li onclick= "setHindi();"> <div class = "menu">Hindi</div> </li> </ul> </li> </ul> </div> <div class="clearfix"></div> </div> <div class="panel-body"> <div class="form-group"> <label for="fname">{!$label.First_Name}:</label> <apex:inputField value="{!con.firstname}" styleClass="form-control"/> </div> <div class="form-group"> <label for="lname">{!$Label.Last_Name}:</label> <apex:inputText value="{!lastname}" styleClass="form-control"/> </div> <div class="form-group"> <label for="email">{!$Label.Email}:</label> <apex:inputField value="{!con.email}" styleClass="form-control" /> </div> <div class="form-group"> <label for="date">{!$Label.Date_of_Birth}:</label> <apex:inputField value="{!con.birthdate}" type="date" styleClass="form-control"/> </div> <apex:commandButton styleClass="btn btn-primary" value="{!$Label.Submit}" action="{!saveContact}"/> <apex:commandButton styleclass="btn btn-danger" value="{!$Label.Cancel}" action="{!cancelContact}" immediate="true"/> </div> </div> </div> </div> </div> </div> </apex:form> </apex:page>

'WorkbenchContactThankMsg' Visualforce Page:


<apex:page sidebar="false" showHeader="false" standardStylesheets="false" language="{!$CurrentPage.parameters.lang}" applyHtmlTag="false" docType="html-5.0"> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"/> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/css/bootstrap.css')}" rel="stylesheet" /> <link href="{!URLFOR($Resource.bootstrap,'bootstrap/dist/jquery.bootgrid.css')}" rel="stylesheet" /> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/modernizr-2.8.1.js')}"></script> <script src="{!URLFOR($Resource.bootstrap,'bootstrap/js/bootstrap.min.js')}"></script> <style> .msgpanel{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; width: 700px; } .vertical-center { min-height: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; display: -webkit-flex; /* For Safari */ -webkit-justify-content: center; /* For Safari */ -webkit-align-items: center; /* For Safari */ } </style> </head> <div class="vertical-center"> <div class="panel panel-primary msgpanel"> <div class="panel-body"> <a href="/apex/WorkbenchContact" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>{!$label.success}..! </strong>{!$label.info}<br/> {!$label.infomsg} </div> </div> </div> </apex:page>
'WorkbenchContactController' Apex Class:


/** Name : WorkbenchContactController Date : 17th Jan, 2016 Author : Ranu Agarwal (iBirds Software Services) Description : This class is used to convert language and also redirect on next page after submit **/ public class WorkbenchContactController{ public string langu{get;set;} public Contact con{get;set;} public String lastname{get;set;} public Boolean thankFlag{get;set;} //Constructor public WorkbenchContactController(){ langu = fetchLanguageCook(); con = new Contact(); thankFlag = false; } //Set Language as English public pagereference changeToEnglish(){ languageCookiValue('en'); return setLanguage('en'); } //Set Language as Chinese public pagereference changeToChinese(){ languageCookiValue('zh-TW'); return setLanguage('zh-TW'); } //Set Language as Spanish public pagereference changeToSpanish(){ languageCookiValue('es'); return setLanguage('es'); } //Set Language as Arabic public pagereference changeToArabic(){ languageCookiValue('ar'); return setLanguage('ar'); } //Set Language as Hindi public pagereference changeToHindi(){ languageCookiValue('hi'); return setLanguage('hi'); } //Set selected language on Page public pagereference setLanguage(String langNm){ pagereference pg = new pagereference('/apex/WorkbenchContact'); pg.getParameters().put('lang',langNm); return pg.setredirect(true); return pg; } //Set Language into cookies private void languageCookiValue(string lan){ Cookie cook = new cookie('language',lan,null,-1,false); List<Cookie> cookies = new List<Cookie>(); cookies.add(cook); ApexPages.currentPage().setCookies(cookies); } //Fetch cookie's language private string fetchLanguageCook(){ string data=''; Cookie cook = ApexPages.currentPage().getCookies().get('language'); if(cook != null){ data = cook.getvalue(); } return data; } //Save contact info and redirect to next thanku msg page public pagereference saveContact(){ //You can uncomment this line if you want to store into Database //insert con; thankFlag = true; con = new Contact(); pagereference pg = new pagereference('/apex/WorkbenchContactThankMsg'); pg.getParameters().put('lang',langu); return pg.setredirect(true); } //Redirect again to current page if cancel pressed public pagereference cancelContact(){ pagereference pg = new pagereference('/apex/workbenchcontact'); return pg.setredirect(true); } }
Here is the testing public url where you can test this demo :
http://ranu-singhal-developer-edition.ap1.force.com/WorkbenchContact

Try this in your project. If you face any issue implementing this, email to me, i will help to set this up. Provide your valuable feedback to me.
Thanks

 

Visualforce Stage Indicator Component

03:17 5 Comments A+ a-


Hello Everyone,

I designed a stage indicator component which will be useful to show stages or status progress on your page. You only need to include this component in your page and pass some parameters according to your requirements.

How to Use:

In visualforce page, include component and pass parameters. There are following parameters:
1) Stage Colors : For example, if you pass 3 colors(First color for previous stages, second for current stage, third for next remaining stages), into 'colors' parameter of component then :
<c:StageIndicator stages = "Prospecting, Qualification, Need Analysis, Value Proposition, Negotiation, Closed Won" currentStage="Value Proposition" colors = "#9999ff, #00e500, silver"/>            
Output :
Stage Indicator
Stage Indicator
2) Stage Values(Comma seperated) : If you pass comma seperated values, then will show as above.
3) Current Stage Name (Required) : Passed current stage will be highlight in given color.
4) Stage Values(Field's API Name of picklist type) : For example, you can pass field's API name in 'stageFieldName' parameter.
<c:StageIndicator stageFieldName = "Account.SLA__C" fontsize = "15px" currentStage="Silver"/>
Here, i used account's SLA__c picklist type field and i didn't pass 'colors' parameter then will use default.
Output :
5) Font Size : In above, i passed font size of stage name, if don't give then will use default.
6) Indicator Height : You  can give height of Stage Indicator.
7) Indicator Width : You  can give width of Stage Indicator.
    For example,
<c:StageIndicator stages = "Prospecting, Qualification, Need Analysis, Value Proposition, Negotiation, Closed Won" fontsize = "18px" currentStage="Value Proposition" indicatorHeight = "50px" indicatorWidth = "150px"/>
Output :

If you not give values in colors, fontsize, height and width  then will use default values. And, if you give both comma seperated values and field's api name then will give precedence to comma seperated values.

VisualForce Component :
<apex:component controller="StageIndicatorController" > <apex:pageMessages /> <apex:attribute type="String" name="colors" assignTo="{!stageColors}" description="Current Color passed to controller" default="#4bca81,#0070d2,#eaedf4"/> <apex:attribute type="String" name="stages" assignTo="{!individualvalues}" description="Values passed to controller" /> <apex:attribute type="String" name="currentStage" assignTo="{!currentValue}" description="Current Values passed to controller" required="true" /> <apex:attribute type="String" name="stageFieldName" assignTo="{!fieldValues}" description="Field Values passed to controller"/> <apex:attribute type="String" name="fontSize" default="15px" description="Font Size passed from component"/> <apex:attribute type="String" name="indicatorHeight" default="30px" description="Height passed from component"/> <apex:attribute type="String" name="indicatorWidth" default="100px" description="Width passed from component"/> <style> ul li, ol li{ margin-left: 0; } .indicator{ list-style: none; overflow: hidden; font: {!fontSize} Helvetica, Arial, Sans-Serif; } .indicator li { float: left; } .indicator li a { color: white; text-decoration: none; padding: 5px 0 5px 65px; height: {!indicatorHeight}; line-height: {!indicatorHeight}; width: {!indicatorWidth}; position: relative; display: block; text-align: center; vertical-align: middle; float: left; } .indicator li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .indicator li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 32px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .indicator li:first-child a { padding-left: 10px; border-radius: 30px 0px 0px 30px !important; } .fontwhite{ color: #fff; } .fontgrey{ color: #6e7f9e !important; } .prevClass{ background-color: {!prevClass}; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .nextClass{ background-color: {!nextClass}; } .currClass{ background-color: {!currClass}; } .indicator li.prevClass a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid {!prevClass}; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .indicator li.currClass a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid {!currClass}; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .indicator li.nextClass a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid {!nextClass}; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } </style> <!-- Display Stages of Indicator --> <ul class="indicator"> <apex:repeat value="{!valuesList}" var="vl"> <li class = "{!IF(vl.color == vl.prevColor, 'prevClass',IF(vl.color == vl.currColor, 'currClass','nextClass'))}"> <a href="#" class = "{!IF(vl.color == vl.nextColor, 'fontgrey', 'fontWhite')}"> {!vl.valName} </a> </li> </apex:repeat> </ul> </apex:component>

Visualforce Page :
<apex:page sidebar="false"> <c:StageIndicator stages = "Prospecting, Qualification, Need Analysis, Value Proposition, Negotiation, Closed Won" fontsize = "18px" currentStage="Value Proposition" indicatorHeight = "50px" indicatorWidth = "150px"/> </apex:page>
Apex Class :
/** Name : StageIndicatorController Date : 11th Jan, 2016 Author : Ranu Agarwal (iBirds Software Services) Description : This class is used to show values in stage indicator. **/ public class StageIndicatorController{ //Color of Stages passed from component public String stageColors{ get{return stageColors;} set{stageColors = value;} } //Comma seperated values from component public string individualvalues{ get{return individualvalues;} set{individualvalues = value;} } //Field API Name passed from component to get picklist values public string fieldValues{ get{return fieldValues;} set{fieldValues = value;} } //Current Value which is shown in different color passed from component public String currentValue{get;set;} public String prevClass{get;set;} public String currClass{get;set;} public String nextClass{get;set;} //Constructor public StageIndicatorController(){} //Getter to get values of stages public List<StagesWrapper> getvaluesList(){ try{ if(!string.isBlank(stageColors) && stageColors.split(',').size() ==3){ prevClass = stageColors.split(',').get(0).trim(); currClass = stageColors.split(',').get(1).trim(); nextClass = stageColors.split(',').get(2).trim(); } List<StagesWrapper> stagesWrapperList = new List<StagesWrapper>(); Boolean currentMatch = false; List<String> stagevalues = new List<String>(); //If both comma seperated and API Name are blank if(string.isBlank(individualvalues) && string.isBlank(fieldValues)){ ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Please give values either in comma seperated or field API name.'); ApexPages.addMessage(myMsg); return null; } //If API Name given otherwise default use comma seperated values if(string.isBlank(individualvalues) && !string.isBlank(fieldValues)){ stagevalues = pickListValues(); }else{ stagevalues = individualvalues.split(','); } //Fill model class with different colors according to stage's level for(String nm : stagevalues ){ //For current value and previous values String colorCode = currentValue == nm.trim() ? currClass : prevClass; //For next remaining if(currentMatch) colorCode = nextClass; if(currentValue == nm.trim() && !currentMatch) currentMatch = true; stagesWrapperList.add(new StagesWrapper(nm.trim(),colorCode,prevClass,currClass,nextClass)); } return stagesWrapperList; }catch(Exception e){ ApexPages.addMessages(e); return null; } } //Method to get picklist values using object field's API name which is passed from component private List<String> pickListValues(){ //for all values in the picklist list List<String> valList = new List<String>(); Schema.sObjectType sObjType = Schema.getGlobalDescribe().get(fieldValues.substring(0, fieldValues.indexOf('.', 0))); Map<String, Schema.SObjectField> field_map = sObjType.getDescribe().fields.getMap(); List<Schema.PicklistEntry> pick_list_values = field_map.get(fieldValues.substring(fieldValues.indexOf('.', 0)+1, fieldValues.length())).getDescribe().getPickListValues(); for (Schema.PicklistEntry a : pick_list_values) { valList.add(a.getValue()); } return valList; } //Wrapper class to show values of stages and color on page public class StagesWrapper{ public String valName{get;set;} Public String color {get;set;} public String prevColor{get;set;} public String currColor{get;set;} public String nextColor{get;set;} public StagesWrapper(String vn,String c, String prevColor, String currColor, String nextColor){ this.valName = vn; this.color = c; this.prevColor = prevColor; this.currColor = currColor; this.nextColor = nextColor; } } }

Try this component in your project. If you face any issue implementing this, email to me, i will help to set this up. Provide your valuable feedback to me.

Thanks