{"id":6133,"date":"2017-06-05T01:11:52","date_gmt":"2017-06-05T01:11:52","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6133"},"modified":"2020-08-26T10:33:27","modified_gmt":"2020-08-26T14:33:27","slug":"text-slider-lightning-component-for-salesforce-with-live-demo","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/","title":{"rendered":"Text Slider Lightning Component for Salesforce  with Live Demo"},"content":{"rendered":"\n<p>In this post we will create simple and powerful <strong>Text Slider Component<\/strong> in Lightning.<\/p>\n\n\n\n<p>Below are list of all features supported by this Component<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li style=\"text-align: justify;\">Its pure CSS based without any JavaScript libraries therefore super fast<\/li><li style=\"text-align: justify;\">Long contents are auto scrolled with nice overloaded CSS for scroll bars<\/li><li style=\"text-align: justify;\">Ability to set Header and Body Text for each slides<\/li><li style=\"text-align: justify;\">Enable or disable auto background colors<\/li><li style=\"text-align: justify;\">Enable or disable auto slideshow<\/li><li style=\"text-align: justify;\">Control slides delays in case timer enabled<\/li><li style=\"text-align: justify;\">If auto background color turned off then ability to control background and text color<\/li><li style=\"text-align: justify;\">Slider contents are un-escaped means we can render richtext content<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>Before diving into the source code, see below Live Demo. <em>(Lightning component is rendered on <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/\">Visualforce with the help of Lightning Out<\/a> to show this demo)<\/em><\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"width: 100%; height: 230px;\" src=\"https:\/\/shivasoft-developer-edition.ap7.force.com\/BlogDemo\/SliderDemo\" width=\"300\" height=\"150\" frameborder=\"0\"><\/iframe>\n\n\n\n<p>Lets start with first component. This component is only used to define attributes for each slide. This component would be used by parent component as a part of facets to read all slider properties.<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>Slide.cmp<\/strong><\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;aura:component &gt;\n    &lt;aura:attribute name=&quot;title&quot; type=&quot;String&quot; required=&quot;true&quot;\/&gt;\n    &lt;aura:attribute name=&quot;content&quot; type=&quot;String&quot; required=&quot;true&quot;\/&gt;\n    &lt;aura:attribute name=&quot;bgColor&quot; type=&quot;String&quot; default=&quot;#0070d2&quot; \/&gt;\n    &lt;aura:attribute name=&quot;contentColor&quot; type=&quot;String&quot; default=&quot;#fff&quot; \/&gt;\n    &lt;aura:attribute name=&quot;isFocused&quot; type=&quot;Boolean&quot; default=&quot;false&quot; \/&gt;\n&lt;\/aura:component&gt;\n<\/pre><\/div>\n\n\n<p>Next comes, brain of this application. All heavy lifting for css is done here. You can refer this component to see <strong>how Nested components can be used and how we can read nested component properties in parent component<\/strong>.<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>AnimatedSlider.cmp<\/strong><\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;aura:component &gt;\n    &lt;aura:attribute type=&quot;Aura.Component&#x5B;]&quot; name=&quot;slideContents&quot; \/&gt;\n    &lt;aura:Attribute type=&quot;String&quot; name=&quot;height&quot; default=&quot;300px&quot; \/&gt;\n    &lt;aura:attribute type=&quot;Object&#x5B;]&quot; name=&quot;slidersList&quot; \/&gt;\n    &lt;aura:attribute name=&quot;isAutoTimer&quot; type=&quot;Boolean&quot; default=&quot;false&quot; \/&gt;\n    &lt;aura:attribute name=&quot;delay&quot; type=&quot;Integer&quot; default=&quot;3&quot; description=&quot;Delay for slider change in seconds.&quot;\/&gt;\n    &lt;aura:attribute name=&quot;autoBgColor&quot; type=&quot;String&quot; default=&quot;false&quot; description=&quot;Let application decide if background color should be automatically changed. If this flag is ON then bgColor in slide will not work.&quot;\/&gt;\n    &lt;aura:handler name=&quot;init&quot; value=&quot;{!this}&quot; action=&quot;{!c.doInit}&quot;\/&gt;  \n\n&lt;div class=&quot;slds&quot; style=&quot;{# &#039;height:&#039;+v.height+&#039;;width:100%&#039;}&quot;&gt;\n\n&lt;div class=&quot;css-slider-wrapper&quot;&gt;\n\n            &lt;aura:iteration items=&quot;{!v.slidersList}&quot; var=&quot;s&quot; indexVar=&quot;i&quot;&gt;\n                 &lt;input data-selected-Index=&quot;{!i}&quot; type=&quot;radio&quot; name=&quot;slider&quot; class=&quot;{# &#039;slide-radio&#039;+(i+1)}&quot; checked=&quot;{!s.isFocused}&quot; id=&quot;{# &#039;slider_&#039;+(i+1)}&quot; \/&gt;\n            &lt;\/aura:iteration&gt;  \n\n&lt;div class=&quot;slider-pagination&quot;&gt;\n                &lt;aura:iteration items=&quot;{!v.slidersList}&quot; var=&quot;s&quot; indexVar=&quot;i&quot;&gt;\n                    &lt;label data-selected-Index=&quot;{!i}&quot; for=&quot;{# &#039;slider_&#039;+(i+1)}&quot; class=&quot;{# &#039;page&#039;+(i+1)}&quot; onclick=&quot;{!c.changePageNumber}&quot;&gt;&lt;\/label&gt;\n                &lt;\/aura:iteration&gt;\n            &lt;\/div&gt;\n\n            &lt;aura:iteration items=&quot;{!v.slidersList}&quot; var=&quot;s&quot; indexVar=&quot;i&quot;&gt;     \n\n&lt;div class=&quot;{# &#039;slider slide&#039;+(i+1)}&quot; style=&quot;{# &#039;background :&#039;+s.bgColor+&#039;;left:&#039;+(i*100)+&#039;%&#039;}&quot;&gt;\n\n&lt;div class=&quot;scroll scrollbarStyle&quot;&gt;\n\n&lt;h2 style=&quot;{# &#039;color:&#039;+s.contentColor}&quot;&gt; {# s.title} &lt;\/h2&gt;\n\n                        &lt;span class=&quot;bodyContent&quot; style=&quot;{# &#039;color:&#039;+s.contentColor}&quot;&gt;\n                            &lt;aura:unescapedHtml value=&quot;{# s.content}&quot; \/&gt;\n                        &lt;\/span&gt;\n                    &lt;\/div&gt;\n\n                &lt;\/div&gt;\n\n            &lt;\/aura:iteration&gt;\n        &lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n&lt;\/aura:component&gt;\n<\/pre><\/div>\n\n\n<p><span style=\"text-decoration: underline;\"><strong>AnimatedSliderController.js<\/strong><\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: java; title: ; notranslate\" title=\"\">\n({\n\tdoInit : function(component, event, helper) {\n\t\thelper.doInit(component, event, helper);\n\t},\n    changePageNumber : function(component, event, helper){\n        helper.changePageNumber(component, event, helper);\n    }\n})\n<\/pre><\/pre>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>AnimatedSliderHelper.js<\/strong><\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: java; title: ; notranslate\" title=\"\">\n({\n\tdoInit : function(component, event, helper)  {\n        this.createSlideJSON(component.get(\"v.body\"), component);\n        var isAutoTimer = component.get(\"v.isAutoTimer\");\n\n        if(isAutoTimer){\n            var delay = component.get(\"v.delay\");\n            window.setInterval(function(){\n                helper.nextSlideTimer(component);\n            },delay*1000);\n        }\n\t},\n    createSlideJSON : function(slidefacet, component){\n        var autoColor = component.get(\"v.autoBgColor\");\n        var autoColorCounter = 0;\n        var bgColors = &#x5B;\"#00bcd7\",\"#009788\",\"#0070d2\",\"#faac58\",\"#304a62\",\"#660099\"];\n        var titleColors = &#x5B;\"#000\",\"#fff\",\"#fff\",\"#000\",\"#fff\",\"#fff\"];\n    \tvar slides = &#x5B;];\n        var currentBGColor,currentColor;\n\n        for (var i = 0; i &amp;lt; slidefacet.length; i++) { var isFocused = slidefacet&#x5B;i].get(\"v.isFocused\") ; if(i === 0){ isFocused=true; } currentBGColor = slidefacet&#x5B;i].get(\"v.bgColor\") ; currentColor = slidefacet&#x5B;i].get(\"v.titleColor\"); if(autoColor){ currentBGColor = bgColors&#x5B;autoColorCounter]; currentColor = titleColors&#x5B;autoColorCounter]; autoColorCounter++; if(autoColorCounter &amp;gt;= bgColors.length){\n                    autoColorCounter = 0;\n                }\n            }\n            var singleSlide = {\n                title : slidefacet&#x5B;i].get(\"v.title\") ,\n                content : slidefacet&#x5B;i].get(\"v.content\"),\n                bgColor : currentBGColor,\n                contentColor: currentColor,\n                isFocused: isFocused\n            };\n    \t\tslides.push(singleSlide);\n        }\n        component.set(\"v.slidersList\",slides);\n    } ,\n    nextSlideTimer : function(component){\n        var slideInfo = component.get(\"v.slidersList\");\n        if(slideInfo){\n            for (var i = 0; i &amp;lt; slideInfo.length; i++) { \/\/its last slide and focused, so move to first again\nif(slideInfo&#x5B;i].isFocused &amp;amp;&amp;amp; i &amp;gt;= slideInfo.length-1){\n                    slideInfo&#x5B;i].isFocused = false;\n                    slideInfo&#x5B;0].isFocused = true;\n                    break;\n                }else if(slideInfo&#x5B;i].isFocused){\n                    slideInfo&#x5B;i].isFocused = false;\n                    slideInfo&#x5B;i+1].isFocused = true;\n                    break;\n                }\n            }\n        }\n        component.set(\"v.slidersList\",slideInfo);\n    },\n    changePageNumber : function(component, event, helper){\n        var target = event.target;\n        var selecIndex = target.getAttribute(\"data-selected-Index\");\n\t\tvar slideInfo = component.get(\"v.slidersList\");\n        if(slideInfo){\n\t\t\tfor (var i = 0; i &amp;lt; slideInfo.length; i++) {\n                slideInfo&#x5B;i].isFocused = false;\n            }\n            slideInfo&#x5B;selecIndex].isFocused = true;\n        }\n        component.set(\"v.slidersList\",slideInfo);\n    }\n})\n<\/pre><\/pre>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>AnimatedSlider.css<\/strong><\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.THIS .css-slider-wrapper {\n       display: block;\n      background: #FFF;\n      overflow: hidden;\n      position: relative;\n     height:100%;\n     width:100%;\n}\n.THIS  .slider {\n      width: 100%;\n      height: 100%;\n      background: red;\n      position: absolute;\n      opacity: 1;\n      z-index: 0;\n      display: flex;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      flex-direction: row;\n      flex-wrap: wrap;\n      -webkit-flex-align: center;\n      -webkit-align-items: center;\n      align-items: center;\n      justify-content: center;\n      align-content: center;\n      -webkit-transition: -webkit-transform 1600ms;\n      transition: -webkit-transform 1600ms, transform 1600ms;\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      }\n\n .THIS .slider &amp;gt; div {\n    text-align: center;\n  }\n.THIS .css-slider-wrapper input&#x5B;type=\"radio\"]{\n    display:none;\n}\n.THIS .slider .bodyContent{\n      font-size: 1rem;\n}\n .THIS .slider h2 {\n      font-weight: 500;\n      font-size: 3rem;\n      line-height: 120%;\n  }\n  .THIS .slider-pagination {\n      position: absolute;\n      bottom: 20px;\n      width: 100%;\n      left: 0;\n      text-align: center;\n      z-index: 1000;\n  }\n   .THIS .slider-pagination label {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: inline-block;\n      background: rgba(255,255,255,0.2);\n      margin: 0 2px;\n      border: solid 1px rgba(255,255,255,0.4);\n      cursor: pointer;\n      }\n\n  \/* display respective checkboxes selected on slide change *\/\n  .THIS .slide-radio1:checked ~ .slider-pagination .page1,\n  .THIS .slide-radio2:checked ~ .slider-pagination .page2,\n  .THIS .slide-radio3:checked ~ .slider-pagination .page3,\n  .THIS .slide-radio4:checked ~ .slider-pagination .page4,\n  .THIS .slide-radio5:checked ~ .slider-pagination .page5,\n  .THIS .slide-radio6:checked ~ .slider-pagination .page6,\n  .THIS .slide-radio7:checked ~ .slider-pagination .page7,\n  .THIS .slide-radio8:checked ~ .slider-pagination .page8,\n  .THIS .slide-radio9:checked ~ .slider-pagination .page9,\n  .THIS .slide-radio10:checked ~ .slider-pagination .page10 {\n      background: rgba(255,255,255,1)\n  }\n  \/* Only 10 slides supported *\/\n .THIS  .slide-radio1:checked ~ .slider {\n      -webkit-transform: translateX(0%);\n      transform: translateX(0%);\n  }\n .THIS  .slide-radio2:checked ~ .slider {\n      -webkit-transform: translateX(-100%);\n      transform: translateX(-100%);\n  }\n .THIS  .slide-radio3:checked ~ .slider {\n      -webkit-transform: translateX(-200%);\n      transform: translateX(-200%);\n  }\n .THIS  .slide-radio4:checked ~ .slider {\n      -webkit-transform: translateX(-300%);\n      transform: translateX(-300%);\n  }\n.THIS  .slide-radio5:checked ~ .slider {\n      -webkit-transform: translateX(-400%);\n      transform: translateX(-400%);\n  }\n.THIS  .slide-radio6:checked ~ .slider {\n      -webkit-transform: translateX(-500%);\n      transform: translateX(-500%);\n  }\n.THIS  .slide-radio7:checked ~ .slider {\n      -webkit-transform: translateX(-600%);\n      transform: translateX(-600%);\n  }\n.THIS  .slide-radio8:checked ~ .slider {\n      -webkit-transform: translateX(-700%);\n      transform: translateX(-700%);\n  }\n.THIS  .slide-radio9:checked ~ .slider {\n      -webkit-transform: translateX(-800%);\n      transform: translateX(-800%);\n  }\n.THIS  .slide-radio10:checked ~ .slider {\n      -webkit-transform: translateX(-900%);\n      transform: translateX(-900%);\n  }\n.THIS .scroll{\n    overflow-y: auto;\n    height: 75%;\n}\t\n\n.THIS .scrollbarStyle::-webkit-scrollbar-track\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(216, 237, 255, 1);\n\tborder-radius: 10px;\n\tbackground-color: #F5F5F5;\n}\n\n.THIS .scrollbarStyle::-webkit-scrollbar\n{\n\twidth: 6px;\n\tbackground-color: #F5F5F5;\n}\n\n.THIS .scrollbarStyle::-webkit-scrollbar-thumb\n{\n\tborder-radius: 10px;\n\t-webkit-box-shadow: inset 0 0 6px rgba(216, 237, 255, 1);\n\tbackground-color: #999;\n}\n\n\/*Smaller Screens*\/\n@media only screen and (max-width: 767px) {\n  .THIS .slider h2 {\n      font-size: 1.5em;\n  }\n  .THIS .slider &amp;gt; div {\n      padding: 0 2%\n  }\n   .THIS .slider .bodyContent{\n      font-size: 0.8rem;\n   }\n  }\n<\/pre><\/pre>\n\n\n\n<p>Lets put all together to see Demo and how it looks.<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>SliderDemo.cmp<\/strong><\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;aura:component implements=&quot;flexipage:availableForAllPageTypes&quot; access=&quot;global&quot;&gt;\n\t&lt;c:AnimatedSlider height=&quot;200px&quot; isAutoTimer=&quot;true&quot; autoBgColor=&quot;true&quot; delay=&quot;5&quot;&gt;\n        &lt;c:Slide title=&quot;Slider Component for Lightning&quot; content=&quot;Simple Slider component with Navigation&quot; bgColor=&quot;#00bcd7&quot;\/&gt;\n        \t&lt;c:Slide title=&quot;Custom Scroll bars for Long Text&quot; content=&quot;Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers. Its long long long text but still won&#039;t look bad. It contains custom CSS for scrollbars however, will only work in modern browsers.&quot; \/&gt;\n            &lt;c:Slide title=&quot;Nested Component&quot; content=&quot;Good example of using Nested Components in Lightning&quot; \/&gt;\n            &lt;c:Slide title=&quot;Pure CSS Based&quot; content=&quot;This component is built purely in CSS and Lightning without JavaScript library or Apex Controller&quot; bgColor=&quot;#009788&quot; \/&gt;\n            &lt;c:Slide title=&quot;Timer&quot; content=&quot;Time for auto slideshow. Delay can be configured and Timer can be turned OFF or ON&quot; \/&gt;\n        \t&lt;c:Slide title=&quot;Known Limitation&quot; content=&quot;Currently it supports 10 slides. To increase capacity, simply change CSS.&quot; \/&gt;\n        \t&lt;c:Slide title=&quot;Richtext Support&quot; content=&quot;Contents from Rich text fields are supported.&quot; \/&gt;\n        &lt;\/c:AnimatedSlider&gt;\n&lt;\/aura:component&gt;\n<\/pre><\/div>\n\n\n<p>And that&#8217;s all. Your Text slider component in Lightning is ready for use. <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/\">Read here&nbsp;to know how I displayed Lightning component to unauthenticated users for demo purpose.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce<\/p>\n","protected":false},"author":1,"featured_media":6146,"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-6133","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\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":5135,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/override-default-loading-message-in-salesforce-lightning-using-template\/","url_meta":{"origin":6133,"position":0},"title":"Override default loading message in Salesforce lightning application using template","author":"Jitendra","date":"January 5, 2016","format":false,"excerpt":"While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image. Most of us, for sure will want to customize this loading message to match their Salesforce implementation theme. We can use \"Lightning Template\" to override this message to\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Default loading screen in Salesforce lightning","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-lightning-default-loading-message-300x113.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5717,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/flipcard-lightning-component\/","url_meta":{"origin":6133,"position":1},"title":"Flipcard Lightning Component","author":"Jitendra","date":"September 8, 2016","format":false,"excerpt":"A simple CSS based animated Flip card Lightning Component for beginners","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Flipcard Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/FlipCard-Component.gif?fit=420%2C328&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":6133,"position":2},"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 &quot;Salesforce&quot;","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":6133,"position":3},"title":"Salesforce  Lightning Component &#8211; 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 &quot;Lightning&quot;","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":[]},{"id":7129,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/change-icon-color-in-lightning-web-component\/","url_meta":{"origin":6133,"position":4},"title":"Change Icon Color in Lightning Web Component","author":"Jitendra","date":"June 30, 2020","format":false,"excerpt":"Why fill css property not working for LWC Icon","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/View-Source-code-of-LWC-Icon-as-svg.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5364,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/dynamically-instantiate-and-destroy-lightning-components-modal-dialog-component\/","url_meta":{"origin":6133,"position":5},"title":"Dynamically Instantiate and destroy Lightning Components &#8211; Modal dialog component","author":"Jitendra","date":"February 24, 2016","format":false,"excerpt":"Learn how to create advance lightning component (Modal dialog) and dynamically instantiate and destroy it","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Ligtning Modal Window","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/02\/Ligtning-Modal-Window.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/02\/Ligtning-Modal-Window.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/02\/Ligtning-Modal-Window.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6133","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=6133"}],"version-history":[{"count":14,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6133\/revisions"}],"predecessor-version":[{"id":7171,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6133\/revisions\/7171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6146"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}