{"id":5861,"date":"2016-12-20T19:16:10","date_gmt":"2016-12-20T19:16:10","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5861"},"modified":"2017-05-11T01:09:00","modified_gmt":"2017-05-11T01:09:00","slug":"circular-progress-bar-with-conditional-theme-salesforce-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-with-conditional-theme-salesforce-lightning-component\/","title":{"rendered":"Circular Progress Bar with Conditional Theme \u2013 Salesforce Lightning Component"},"content":{"rendered":"

Just after two days of writing\u00a0Circular Progress Bar<\/a><\/strong> , came up with few more requirements. So, In this post, will share updated code of Circular Progress Bar. This component can be easily used from Lightning App Builder, check this video to get an idea on how it can be used and configured<\/a>.<\/p>\n

Complete source code of this component is available on my git repository<\/a>. Make sure to follow me to get updated by other free source codes<\/a>. \ud83d\ude42<\/p>\n

In additional to all previous capabilities, below features are added:<\/p>\n

    \n
  1. Conditional Theme – Let’s say before 50% progress bar should be displayed as red and after 50% green.<\/li>\n
  2. Threshold – On basis of this value, theme will change<\/li>\n
  3. Added one more theme – red<\/li>\n
  4. We can show value inside component in three format now – percentage, Actual value or Mix<\/li>\n
  5. Legend font size changes according to size of component<\/li>\n<\/ol>\n

    <\/p>\n

    Apex class – CircularProgressController<\/strong><\/p>\n

    \r\n\/**\r\n * Author\t:\tJitendra Zaa\r\n * Desc\t\t:\tController class for LEX component CircularProgress.\r\n * \t\t\t:\tOn the basis of field API name passed, it calculates percentage of completion.\r\n * *\/\r\npublic class CircularProgressController {    \r\n    \r\n    \/**\r\n     * This class is used to return as JSON Object\r\n     **\/\r\n    class WrapperJSON{\r\n        public Integer total {get;set;}\r\n        public Integer actual {get;set;}\r\n        public Integer val {get;set;}\r\n    }\r\n    \r\n    @AuraEnabled\r\n    public static String computePercentage(String sObjectName, String recordId, String totalValueFieldName, String actualValueFieldName){\r\n        Integer retVal = 0 ;\r\n        String query = null;\r\n        WrapperJSON retObj = new WrapperJSON();\r\n        \r\n        if(totalValueFieldName != null && totalValueFieldName.trim() != '' &&  actualValueFieldName != null && actualValueFieldName.trim() != '' ){\r\n            query = 'SELECT '+totalValueFieldName+', '+actualValueFieldName+' FROM '+sObjectName+' WHERE Id =: recordId';\r\n        }\r\n        else if (actualValueFieldName != null && actualValueFieldName.trim() != '' ) {\r\n            query = 'SELECT '+actualValueFieldName+' FROM '+sObjectName+' WHERE Id =: recordId';\r\n        }\r\n        \r\n        if(query != null){\r\n            try{\r\n                List<SOBject> lstObj = Database.query(query);\r\n                if(lstObj.size() > 0){\r\n                    Decimal totalVal = 0;\r\n                    Decimal actualVal = 0; \r\n                    \r\n                    if(totalValueFieldName != null && totalValueFieldName.trim() != ''){ \r\n                        totalVal = Decimal.valueOf(String.valueOf(lstObj[0].get(totalValueFieldName)));\r\n                        retObj.total = Integer.valueOf(totalVal) ; \r\n                    } \r\n                    actualVal = Decimal.valueOf(String.valueOf(lstObj[0].get(actualValueFieldName)));                     \r\n                    \/\/Means only 1 API Name was supplied and field type is percentage\r\n                    if(totalVal == 0){\r\n                        retObj.val = Integer.valueOf(actualVal) ; \r\n                        retObj.actual = Integer.valueOf(actualVal) ;  \r\n                    }else if (actualVal > 0){\r\n                        retObj.val = Integer.valueOf( ( actualVal \/ totalVal ) * 100 );   \r\n                        retObj.actual = Integer.valueOf(actualVal) ;  \r\n                    } \r\n                }\r\n            }catch(Exception e){}\r\n            \r\n        }         \r\n        return JSON.serialize(retObj) ;        \r\n    }\r\n}\r\n<\/pre>\n
    Test class – CircularProgressControllerTest (96%)<\/strong><\/p>\n
    \r\n\r\n\/**\r\n* Author : Jitendra Zaa\r\n* Desc : Test class for Apex - CircularProgressController\r\n* *\/\r\n@isTest\r\npublic class CircularProgressControllerTest {\r\n\r\n@testSetup static void methodName() {\r\nOpportunity opp = new Opportunity(Name='Circular Progress bar Test',Amount=80,Probability=60,stageName='In Progress',CloseDate=Date.today().addMonths(2));\r\ninsert opp;\r\n}\r\n\r\n\/**\r\n* Below test method creates dynamic SOQL on the basis of two field API provided\r\n* *\/\r\n@isTest\r\nstatic void testUsingFields(){\r\nOpportunity opp = [SELECT Id, Amount, ExpectedRevenue FROM Opportunity];\r\nString retVal = CircularProgressController.computePercentage('Opportunity',Opp.id,'Amount','ExpectedRevenue');\r\n\r\nCircularProgressController.WrapperJSON retPOJO = (CircularProgressController.WrapperJSON)JSON.deserialize(retVal, CircularProgressController.WrapperJSON.class);\r\nSystem.assertEquals(retPOJO.actual, 48) ;\r\nSystem.assertEquals(retPOJO.total, 80) ;\r\nSystem.assertEquals(retPOJO.val, 60) ;\r\n}\r\n\r\n\/**\r\n* Below test method creates dynamic SOQL on the basis of single field considering it as\r\n* percentage type of field\r\n* *\/\r\n@isTest\r\nstatic void testUsingSingleField(){\r\nOpportunity opp = [SELECT Id, Amount, ExpectedRevenue FROM Opportunity];\r\nString retVal = CircularProgressController.computePercentage('Opportunity',Opp.id,'','Amount');\r\n\r\nCircularProgressController.WrapperJSON retPOJO = (CircularProgressController.WrapperJSON)JSON.deserialize(retVal, CircularProgressController.WrapperJSON.class);\r\nSystem.assertEquals(retPOJO.actual, 80) ;\r\nSystem.assertEquals(retPOJO.total, null) ;\r\nSystem.assertEquals(retPOJO.val, 80) ;\r\n}\r\n\r\n}\r\n\r\n<\/pre>\n
     <\/p>\n
    CircularProgress.cmp<\/strong><\/p>\n
    \r\n<aura:component implements="flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, force:hasSObjectName" access="global" controller="CircularProgressController">\r\n    \r\n    <aura:attribute name="recordId" type="Id" description="Id of record on which this component is hosted." \/>\r\n    <aura:attribute name="sObjectName" type="String" description="API name of record on which this component is hosted." \/>\r\n    <aura:attribute name="resultFormat" type="String" default="Percentage" description="Format of result to be displayed inside Circular Progress Bar. Allowed values are Percentage, Actual Number, Mix." \/>\r\n    <aura:attribute name="Legend" type="String" description="Legend to display" \/>\r\n    \r\n\t<aura:attribute name="perText" type="String" default="0%" description="Text to display inside circle. It is auto calculated field and used internally." \/>\r\n    <aura:attribute name="cirDeg" type="String" default="0" description="Degree of Progress to show. It is auto calculated field and used internally." \/>\r\n    \r\n    <aura:attribute name="totalProgress" type="String" default="100" description="Total progress. It can be number OR API name of field." \/>\r\n    <aura:attribute name="actualProgress" type="String" default="50" description="Actual progress. It can be number OR API name of field." \/>\r\n    \r\n    <aura:attribute name="themeBeforeThreshold" type="String" default="green" description="Theme of Circular Progress Bar. Possible values are blue, green, orange." \/>\r\n    <aura:attribute name="themeAfterThreshold" type="String" default="red" description="Theme of Circular Progress Bar. Possible values are blue, green, orange." \/>\r\n    <aura:attribute name="theme" type="String" default="green" description="Internally used attribute to decide final theme on basis of threshold value"\/>  \r\n     \r\n    <aura:attribute name="size" type="String" default="small" description="Size of Circular Progress Bar. Possible values are small, medium, big." \/>\r\n    <aura:attribute name="threshold" type="String" default="50" description="This field can be used to support multiple theme after threshold value" \/> \r\n    <aura:handler name="init" value="{!this}" action="{!c.doInit}"\/>\r\n      \r\n\r\n<div class="clearFloats slds-align--absolute-center">\r\n\r\n<div class="{! ( v.cirDeg >\r\n 179 ) ? 'container p50plus '+v.theme+' '+v.size : 'container '+v.theme +' '+v.size }">\r\n            <span>\r\n                <aura:if isTrue="{! v.resultFormat == 'Percentage' }">\r\n                    {!v.perText} \r\n                <\/aura:if> \r\n                <aura:if isTrue="{! v.resultFormat == 'Actual Number' }">\r\n                    {!v.actualProgress} \r\n                <\/aura:if> \r\n                <aura:if isTrue="{! v.resultFormat == 'Mix' }">\r\n                    {!v.actualProgress}\/{!v.totalProgress} \r\n                <\/aura:if>  \r\n                             \r\n            <\/span>\r\n            \r\n\r\n<div class="slice">\r\n\r\n<div class="bar" style="{! '-webkit-transform: rotate('+v.cirDeg+'deg); -moz-transform: rotate('+v.cirDeg+'deg); -ms-transform: rotate('+v.cirDeg+'deg); -o-transform: rotate('+v.cirDeg+'deg); transform: rotate('+v.cirDeg+'deg); -ms-transform: rotate('+v.cirDeg+'deg);'}"><\/div>\r\n\r\n\r\n<div class="fill"><\/div>\r\n            <\/div>\r\n        <\/div>         \r\n    <\/div>\r\n<div class="{!v.size + ' clearFloats slds-align--absolute-center legend '}"> \r\n        {!v.Legend}\r\n    <\/div>\r\n\r\n\r\n<\/aura:component>\r\n<\/pre>\n
    CircularProgressController.js<\/strong><\/p>\n
    \r\n({\r\n\tdoInit : function(component, event, helper) {\r\n\t\thelper.doInit(component, event, helper) ;\r\n\t}\r\n})\r\n<\/pre>\n
    CircularProgressHelper.js<\/strong><\/p>\n
    \r\n({\r\n\tdoInit : function(component, event, helper)  {\r\n        helper.computeProgress(component, event, helper);\r\n        \r\n\t},\r\n    computeProgress : function(component, event, helper)  {\r\n \r\n        var totalVal = component.get("v.totalProgress");\r\n        var actualVal = component.get("v.actualProgress"); \r\n        \r\n        var threshold = component.get("v.threshold");\r\n        var beforeTheme = component.get("v.themeBeforeThreshold");\r\n        var afterTheme = component.get("v.themeAfterThreshold");\r\n     \r\n        if(totalVal && actualVal && !isNaN(parseInt(totalVal)) && isFinite(totalVal) && !isNaN(parseInt(actualVal)) && isFinite(actualVal)){\r\n           \/\/parameter is number \r\n            var percVal = parseInt(actualVal) \/ parseInt(totalVal) ;\r\n            var progressVal = parseInt(  percVal * 360  ) ;\r\n        \r\n            if((percVal * 100) >= threshold){\r\n                component.set("v.theme" , afterTheme );\r\n            }else{\r\n                component.set("v.theme" , beforeTheme );\r\n            }\r\n    \r\n            component.set("v.cirDeg" , progressVal );\r\n            component.set("v.perText" , parseInt(percVal * 100)  +'%' ); \r\n        }else if(actualVal){\r\n            helper.callApexMethod(component, event, helper, totalVal, actualVal);\r\n        }else{\r\n            \/\/valuea are used directly \r\n            if(actualVal >= threshold){\r\n                component.set("v.theme" , afterTheme );\r\n            }else{\r\n                component.set("v.theme" , beforeTheme );\r\n            }\r\n        }\r\n    },\r\n    callApexMethod : function(component, event, helper, txt_totalVal, txt_actualVal)  {\r\n        \r\n        var action = component.get('c.computePercentage');\r\n        var txt_recordId = component.get("v.recordId");\r\n        var txt_sObjectName = component.get("v.sObjectName");\r\n        \r\n        action.setParams({\r\n            recordId : txt_recordId,\r\n            sObjectName : txt_sObjectName,\r\n            totalValueFieldName : txt_totalVal,\r\n            actualValueFieldName : txt_actualVal\r\n        });\r\n        \r\n        action.setCallback(this, function(a) {\r\n            if (a.getState() === 'SUCCESS') {\r\n                var retObj =  JSON.parse(a.getReturnValue())  ; \r\n                \t\r\n                var threshold = component.get("v.threshold");\r\n        \t\tvar beforeTheme = component.get("v.themeBeforeThreshold");\r\n        \t\tvar afterTheme = component.get("v.themeAfterThreshold");\r\n                \r\n                component.set("v.totalProgress" , retObj.total );\r\n                component.set("v.actualProgress" , retObj.actual ); \r\n                \r\n                if( parseInt(retObj.val) >= threshold){\r\n                \tcomponent.set("v.theme" , afterTheme );\r\n                }else{\r\n                    component.set("v.theme" , beforeTheme );\r\n                }\r\n                \r\n                var progressVal = parseInt(  (retObj.val\/100) * 360  ) ; \r\n                component.set("v.cirDeg" , progressVal );\r\n                component.set("v.perText" , parseInt(retObj.val)  +'%' );              \r\n            }  \r\n        });\r\n        $A.enqueueAction(action);  \r\n    }\r\n})\r\n<\/pre>\n
    CircularProgress.design<\/strong><\/p>\n
    \r\n<design:component>    \r\n    <design:attribute name="size" label="Size" datasource="small, medium, big" description="Size of the of the component" \/>\r\n    \r\n    <design:attribute name="totalProgress" label="Total" description="Either API Name of field Or numeric value showing total value to be used for computation" \/>\r\n    <design:attribute name="actualProgress" label="Actual" description="Either API Name of field Or numeric value showing actual value to be used for computation" \/>\r\n     \r\n    <design:attribute name="Legend" label="Legend" description="Legend to be displayed." \/>\r\n    \r\n    <design:attribute name="resultFormat" label="Result Format" datasource="Percentage , Actual Number, Mix" description="Format of result to be displayed inside Circular Progress Bar. Allowed values are Percentage, Actual Number, Mix." \/>\r\n     \r\n    <design:attribute name="themeBeforeThreshold" label="Theme Before Threshold" datasource="blue, green , orange, red" description="Theme of the component before threshold" \/>\r\n    \r\n    <design:attribute name="themeAfterThreshold" label="Theme After Threshold" datasource="blue, green , orange, red" description="Theme of the component After threshold" \/>\r\n    \r\n    <design:attribute name="threshold" label="Threshold after which color needs to be chaged" description="This field can be used to support multiple theme after threshold value" \/> \r\n     \r\n<\/design:component>\r\n<\/pre>\n
    CircularProgress.auradocs<\/strong><\/p>\n
    \r\n<aura:documentation>\r\n\t<aura:description>\r\n        <code>c:CircularProgress<\/code> component can be used to display progress in circular bar format.\r\n    <\/aura:description>\r\n     \r\n\t<aura:example name="Example1" label="Examples of Circular Progress Component" ref="c:CircularProgressExample"> \r\n\t<\/aura:example>\r\n<\/aura:documentation>\r\n<\/pre>\n
    CircularProgress.css<\/strong><\/p>\n
    \r\n.THIS .clearFloats:before, .THIS .clearFloats:after \r\n{\r\n    content: " "; \r\n    display: table !important;\r\n}\r\n\r\n.THIS  .clearFloats:after {clear: both;}\r\n.THIS .clearFloats {*zoom: 1; }\r\n\r\n.THIS .container .slice , .THIS .container.p50plus .slice\r\n{\r\n\tclip: rect(auto, auto, auto, auto);\r\n}\r\n\r\n.THIS .pie, .THIS .container .bar , .THIS .fill, .THIS .container.p50plus .fill{\r\n\t position: absolute;\r\n\t  border: 0.08em solid #307bbb;\r\n\t  width: 0.84em;\r\n\t  height: 0.84em;\r\n\t  clip: rect(0em, 0.5em, 1em, 0em);\r\n\t  -webkit-border-radius: 50%;\r\n\t  -moz-border-radius: 50%;\r\n\t  -ms-border-radius: 50%;\r\n\t  -o-border-radius: 50%;\r\n\t  border-radius: 50%;\r\n\t  -webkit-transform: rotate(0deg);\r\n\t  -moz-transform: rotate(0deg);\r\n\t  -ms-transform: rotate(0deg);\r\n\t  -o-transform: rotate(0deg);\r\n\t  transform: rotate(0deg);\r\n}\r\n\r\n.THIS .pie-fill, .THIS .container.p50plus .bar:after, .THIS .container.p50plus .fill{\r\n\t -webkit-transform: rotate(180deg);\r\n\t  -moz-transform: rotate(180deg);\r\n\t  -ms-transform: rotate(180deg);\r\n\t  -o-transform: rotate(180deg);\r\n\t  transform: rotate(180deg);\r\n}\r\n\r\n.THIS .container {\r\n\t  position: relative;\r\n\t  font-size: 120px;\r\n\t  width: 1em;\r\n\t  height: 1em;\r\n\t  -webkit-border-radius: 50%;\r\n\t  -moz-border-radius: 50%;\r\n\t  -ms-border-radius: 50%;\r\n\t  -o-border-radius: 50%;\r\n\t  border-radius: 50%;\r\n\t  float: left;\r\n\t  margin: 0 0.1em 0.1em 0;\r\n\t  background-color: #cccccc;\r\n\t}\r\n\r\n.THIS .container *, .THIS .container *:before, .THIS .container *:after {\r\n\t  -webkit-box-sizing: content-box;\r\n\t  -moz-box-sizing: content-box;\r\n\t  box-sizing: content-box;\r\n\t}\r\n\r\n.THIS .container.center {\r\n\t  float: none;\r\n\t  margin: 0 auto;\r\n\t}\r\n.THIS .container.big {\r\n\t  font-size: 240px;\r\n\t}\r\n.THIS .container.small {\r\n\t  font-size: 80px;\r\n\t}\r\n.THIS .container.medium {\r\n\t  font-size: 160px;\r\n\t}\r\n\r\n.THIS .container > span {\r\n\t  position: absolute;\r\n\t  width: 100%;\r\n\t  z-index: 1;\r\n\t  left: 0;\r\n\t  top: 0;\r\n\t  width: 5em;\r\n\t  line-height: 5em;\r\n\t  font-size: 0.2em;\r\n\t  color: #cccccc;\r\n\t  display: block;\r\n\t  text-align: center;\r\n\t  white-space: nowrap;\r\n\t  -webkit-transition-property: all;\r\n\t  -moz-transition-property: all;\r\n\t  -o-transition-property: all;\r\n\t  transition-property: all;\r\n\t  -webkit-transition-duration: 0.2s;\r\n\t  -moz-transition-duration: 0.2s;\r\n\t  -o-transition-duration: 0.2s;\r\n\t  transition-duration: 0.2s;\r\n\t  -webkit-transition-timing-function: ease-out;\r\n\t  -moz-transition-timing-function: ease-out;\r\n\t  -o-transition-timing-function: ease-out;\r\n\t  transition-timing-function: ease-out;\r\n\t}\r\n\r\n.THIS .container:after {\r\n\t  position: absolute;\r\n\t  top: 0.08em;\r\n\t  left: 0.08em;\r\n\t  display: block;\r\n\t  content: " ";\r\n\t  -webkit-border-radius: 50%;\r\n\t  -moz-border-radius: 50%;\r\n\t  -ms-border-radius: 50%;\r\n\t  -o-border-radius: 50%;\r\n\t  border-radius: 50%;\r\n\t  background-color: whitesmoke;\r\n\t  width: 0.84em;\r\n\t  height: 0.84em;\r\n\t  -webkit-transition-property: all;\r\n\t  -moz-transition-property: all;\r\n\t  -o-transition-property: all;\r\n\t  transition-property: all;\r\n\t  -webkit-transition-duration: 0.2s;\r\n\t  -moz-transition-duration: 0.2s;\r\n\t  -o-transition-duration: 0.2s;\r\n\t  transition-duration: 0.2s;\r\n\t  -webkit-transition-timing-function: ease-in;\r\n\t  -moz-transition-timing-function: ease-in;\r\n\t  -o-transition-timing-function: ease-in;\r\n\t  transition-timing-function: ease-in;\r\n\t}\r\n\r\n.THIS .container .slice {\r\n\t  position: absolute;\r\n\t  width: 1em;\r\n\t  height: 1em;\r\n\t  clip: rect(0em, 1em, 1em, 0.5em);\r\n\t}\r\n\r\n.THIS .container:hover {\r\n\t  cursor: default;\r\n\t}\r\n\r\n.THIS .container:hover > span {\r\n\t  width: 3.33em;\r\n\t  line-height: 3.33em;\r\n\t  font-size: 0.3em; \r\n\t}\r\n\r\n.THIS .container:hover:after {\r\n\t  top: 0.04em;\r\n\t  left: 0.04em;\r\n\t  width: 0.92em;\r\n\t  height: 0.92em;\r\n\t}\r\n\r\n.THIS .container.blue .bar, .THIS .container.blue .fill {\r\n  border-color: #307bbb !important;\r\n}\r\n\r\n.THIS .container.blue:hover > span {\r\n  color: #307bbb;\r\n}\r\n\r\n.THIS .container.green .bar, .THIS .container.green .fill {\r\n  border-color: #4db53c !important;\r\n}\r\n\r\n.THIS .container.green:hover > span {\r\n  color: #4db53c;\r\n}\r\n \r\n.THIS .container.orange .bar, .THIS .container.orange .fill {\r\n  border-color: #dd9d22 !important;\r\n}\r\n\r\n.THIS .container.orange:hover > span {\r\n  color: #dd9d22;\r\n}\r\n.THIS .container.red .bar, .THIS .container.red .fill {\r\n  border-color: #ff0000 !important;\r\n}\r\n\r\n.THIS .container.red:hover > span {\r\n  color: #ff0000;\r\n}\r\n\r\n.THIS.legend{ \r\n    color: rgb(22, 50, 92);\r\n    font-weight: bold;\r\n}\r\n.THIS.legend.big{\r\n    font-size: 1.25rem;\r\n    color: rgb(22, 50, 92);\r\n}\r\n.THIS.legend.medium{\r\n    font-size: 1.0rem;\r\n    color: rgb(22, 50, 92);\r\n}\r\n.THIS.legend.small{\r\n    font-size: 0.7rem; \r\n    color: rgb(22, 50, 92);\r\n}\r\n<\/pre>\n
    CircularProgressExample.cmp<\/strong><\/p>\n
    \r\n<aura:component >    \r\n\r\n<div class="slds-grid slds-p-top--xx-large">\r\n\r\n<div class="slds-col">\r\n            <c:CircularProgress themeAfterThreshold="blue" themeBeforeThreshold="red" size="medium" totalProgress="100" actualProgress="65" Legend="Result format Percentage" resultFormat="Percentage" threshold="50"\/>              \r\n        <\/div>\r\n\r\n<div class="slds-col">\r\n            <c:CircularProgress themeAfterThreshold="orange" themeBeforeThreshold="red" size="medium" totalProgress="100" actualProgress="35" Legend="Result format Actual Number" resultFormat="Actual Number" threshold="25" \/>  \r\n        <\/div>\r\n\r\n<div class="slds-col">\r\n            <c:CircularProgress themeAfterThreshold="green" themeBeforeThreshold="red" size="medium" totalProgress="90" actualProgress="24" Legend="Result format Mix" resultFormat="Mix" threshold="10" \/>  \r\n        <\/div>\r\n\r\n<div class="slds-col">\r\n            <c:CircularProgress themeAfterThreshold="green" themeBeforeThreshold="red" size="medium" totalProgress="90" actualProgress="24" Legend="Threshold Second theme in Action" resultFormat="Mix" threshold="30" \/>  \r\n        <\/div>\r\n    <\/div>   \r\n<\/aura:component>\r\n<\/pre>\n
    Output :<\/strong><\/p>\n
    \"Circular<\/a>
    Circular Progress Bar with multiple color<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Salesforce Lightning Component – Circular Progress Bar with Conditional Theme. Ready to be used by Developers and Admins on App builder for any object. No External Javascript Library, Lightweight CSS based.<\/p>\n","protected":false},"author":1,"featured_media":5862,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5852,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/how-to-document-lightning-component\/","url_meta":{"origin":5861,"position":0},"title":"How to Document Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Example, showing process of documenting Lightning Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Documentaing Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":5843,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","url_meta":{"origin":5861,"position":1},"title":"Circular Progress Bar – Salesforce Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6298,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-winter-18-release-my-favorite-features\/","url_meta":{"origin":5861,"position":2},"title":"Salesforce Winter 18 Release \u2013 My Favorite Features","author":"Jitendra","date":"October 4, 2017","format":false,"excerpt":"My favorite Salesforce Winter 18 features about Lightning, Flow, Platform Event , Shield and Salesforce DX","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flow in Salesforce App Builder","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/10\/Flow-in-Salesforce-App-Builder.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5796,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-data-services-standard-controller-for-lightning-components\/","url_meta":{"origin":5861,"position":3},"title":"Lightning Data Service – Standard Controller for Lightning Components","author":"Jitendra","date":"July 22, 2017","format":false,"excerpt":"Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Salesforce Lightning Data Services","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6252,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-path-read-only-lightning-component\/","url_meta":{"origin":5861,"position":4},"title":"Salesforce Path – Read Only Lightning Component","author":"Jitendra","date":"September 17, 2017","format":false,"excerpt":"Chevron Component build in Lightning with Same look and feel as of Salesforce Path in read only mode","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Read only Path (Chevron) Component in Salesforce Lightning","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":5861,"position":5},"title":"Lightning Component for Wikipedia search","author":"Jitendra","date":"January 6, 2016","format":false,"excerpt":"Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Component for Wikipedia Search","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5861"}],"version-history":[{"count":7,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5861\/revisions"}],"predecessor-version":[{"id":6041,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5861\/revisions\/6041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5862"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}