{"id":5843,"date":"2016-12-19T04:19:15","date_gmt":"2016-12-19T04:19:15","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5843"},"modified":"2016-12-20T20:36:46","modified_gmt":"2016-12-20T20:36:46","slug":"circular-progress-bar-salesforce-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-salesforce-lightning-component\/","title":{"rendered":"Circular Progress Bar – Salesforce Lightning Component"},"content":{"rendered":"

In this blog post we will create reusable Lightning Component to show progress of record using Circular Progress Bar. This component is mostly build using CSS. Javascript is used only for Lightning component support and calling Apex Class. Check video demo here on how to configure and use this component.<\/strong><\/a><\/p>\n

Note – There is updated version of this component here<\/a>.<\/em><\/p>\n

Circular Progress Bar LEX Component Capabilities<\/h3>\n
    \n
  1. Size – small, medium , large<\/li>\n
  2. Theme – blue, orange , green<\/li>\n
  3. Legend – Legend to display<\/li>\n
  4. Total – Either Number Or API Name of field. Used to derive percentage of Progress Bar<\/li>\n
  5. Actual –\u00a0Either Number Or API Name of field. Used to derive percentage of Progress Bar. If Object contains percentage type of field, then\u00a0Total\u00a0<\/em>can be blank and this field can only contain API name of field of type percentage<\/li>\n<\/ol>\n

    <\/p>\n

    CircularProgressController (Apex Class)<\/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    @AuraEnabled\r\n    public static Integer computePercentage(String sObjectName, String recordId, String totalValueFieldName, String actualValueFieldName){\r\n        Integer retVal = 0 ;\r\n        String query = null;\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                    } \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                        retVal = Integer.valueOf(actualVal );\r\n                    }else if (actualVal > 0){\r\n                        retVal = Integer.valueOf( ( actualVal \/ totalVal ) * 100 );  \r\n                    } \r\n                }\r\n            }catch(Exception e){}\r\n            \r\n        }         \r\n        return retVal;        \r\n    }\r\n}\r\n<\/pre>\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    \r\n    <aura:attribute name="Legend" type="String" description="Legend to display" \/>\r\n    \r\n    <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="theme" type="String" default="green" description="Theme of Circular Progress Bar. Possible values are blue, green, orange." \/>\r\n    <aura:attribute name="size" type="String" default="small" description="Size of Circular Progress Bar. Possible values are small, medium, big." \/>\r\n    \r\n    <aura:handler name="init" value="{!this}" action="{!c.doInit}"\/>\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>{!v.perText}<\/span> \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<div class="fill"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n         \r\n    <\/div>\r\n\r\n\r\n<div class="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        var totalVal = component.get("v.totalProgress");\r\n        var actualVal = component.get("v.actualProgress"); \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            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        }\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 percVal = a.getReturnValue() ; \r\n                var progressVal = parseInt(  (percVal\/100) * 360  ) ; \r\n                component.set("v.cirDeg" , progressVal );\r\n                component.set("v.perText" , parseInt(percVal)  +'%' );              \r\n            }  \r\n        });\r\n        $A.enqueueAction(action);  \r\n    }\r\n})\r\n<\/pre>\n
    CircularProgress.css<\/strong><\/p>\n
    \r\n.THIS.legend{\r\n    font-size: 1.25rem;\r\n    color: rgb(22, 50, 92);\r\n}\r\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<\/pre>\n

    \nCircularProgress.design<\/strong><\/p>\n
    \r\n<design:component>    \r\n\t<design:attribute name="theme" label="Theme" datasource="blue, green , orange" description="Color theme of the component" \/>\r\n    \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:component>\r\n<\/pre>\n
    CircularProgress.svg<\/strong>
    \nDownload this <\/a>icon and open in notepad. Copy complete content in this file.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Demo and Complete Source code of Circular Progress Bar, Salesforce Lightning Component<\/p>\n","protected":false},"author":1,"featured_media":5845,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":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":"","jetpack_post_was_ever_published":false},"categories":[310,9],"tags":[311],"class_list":["post-5843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circular-Progress-Bar.gif?fit=332%2C720&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":5843,"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":5861,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/circular-progress-bar-with-conditional-theme-salesforce-lightning-component\/","url_meta":{"origin":5843,"position":1},"title":"Circular Progress Bar with Conditional Theme \u2013 Salesforce Lightning Component","author":"Jitendra","date":"December 20, 2016","format":false,"excerpt":"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.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Circular Progress Bar v2","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Circuar-Progress-Bar-v2.gif?fit=1200%2C272&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5843,"position":2},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&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-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5843,"position":3},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":5843,"position":4},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":5843,"position":5},"title":"Salesforce  Lightning Component – expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.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\/5843","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=5843"}],"version-history":[{"count":10,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5843\/revisions"}],"predecessor-version":[{"id":5872,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5843\/revisions\/5872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5845"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}