Ad Code

Responsive Advertisement

Close the action panel | dismiss Action Panel | dismiss action component popup

dismiss action component popup using javascript in Lightning

Component Name:
ListBuilder.cmp


 <aura:component implements="force:lightningQuickAction" >  
   <div class="demo-only" style="height: 640px;" aura:id="MainDiv">  
     <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="id-of-modalheader-h2" aria-modal="true" aria-describedby="modal-content-id-1">  
       <div class="slds-modal__container">  
         <header class="slds-modal__header">  
           <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="{!c.cancelBtn}">  
             <!--<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">  
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />  
             </svg>-->  
             <lightning:icon iconName="utility:close" class="slds-button__icon slds-button__icon_large"/>  
             <span class="slds-assistive-text">Close</span>  
           </button>  
           <!--<lightning:button variant="inverse" label="Close" iconName="utility:close" iconPosition="left" onclick="{! c.handleClick }" />  
           -->  
           <h2 id="id-of-modalheader-h2" class="slds-text-heading_medium">Add Products</h2>  
           <p class="slds-m-top_x-small">Pricebook: Salesforce Products</p>  
         </header>  
         <div class="slds-modal__content slds-grid slds-nowrap" id="modal-content-id-1">  
           <div class="slds-col slds-grid slds-grid_vertical slds-nowrap">  
             <div class="slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade">  
               <div class="slds-form-element">  
                 <label class="slds-form-element__label slds-assistive-text" for="combobox-unique-id">Search</label>  
                 <div class="slds-form-element__control">  
                   <div class="slds-combobox_container">  
                     <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">  
                       <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">  
                         <input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id" aria-autocomplete="list" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" placeholder="Search Salesforce" />  
                         <span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">  
                           <!-- <svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:search" class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default"/>  
                         </span>  
                       </div>  
                       <div id="listbox-unique-id" role="listbox">  
                         <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">  
                           <li role="presentation" class="slds-listbox__item">  
                             <span id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">  
                               <span class="slds-media__figure">  
                                 <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">  
                                   <!--<svg class="slds-icon slds-icon_small" aria-hidden="true">  
                                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account" />  
                                   </svg>-->  
                                   <lightning:icon iconName="standard:account" class="slds-icon slds-icon_small"/>  
                                   <span class="slds-assistive-text">Description of icon</span>  
                                 </span>  
                               </span>  
                               <span class="slds-media__body">  
                                 <span class="slds-listbox__option-text slds-listbox__option-text_entity">Acme</span>  
                                 <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • San Francisco</span>  
                               </span>  
                             </span>  
                           </li>  
                           <li role="presentation" class="slds-listbox__item">  
                             <span id="listbox-option-unique-id-02" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">  
                               <span class="slds-media__figure">  
                                 <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">  
                                   <!--<svg class="slds-icon slds-icon_small" aria-hidden="true">  
                                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account" />  
                                   </svg>-->  
                                   <lightning:icon iconName="standard:account" class="slds-icon slds-icon_small"/>  
                                   <span class="slds-assistive-text">Description of icon</span>  
                                 </span>  
                               </span>  
                               <span class="slds-media__body">  
                                 <span class="slds-listbox__option-text slds-listbox__option-text_entity">Salesforce.com, Inc.</span>  
                                 <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • San Francisco</span>  
                               </span>  
                             </span>  
                           </li>  
                         </ul>  
                       </div>  
                     </div>  
                   </div>  
                 </div>  
               </div>  
               <div class="slds-pill_container slds-pill_container_bare">  
                 <div id="listbox-unique-id" role="listbox">  
                   <ul class="slds-listbox" role="presentation">  
                     <li role="presentation" class="slds-listbox__item">  
                       <span class="slds-pill" role="option" tabindex="0" aria-selected="true">  
                         <span class="slds-pill__label" title="Analytics">Analytics</span>  
                         <span class="slds-icon_container slds-pill__remove" title="Remove">  
                           <!--<svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:close" class="slds-icon slds-icon_x-small slds-icon-text-default"/>  
                           <span class="slds-assistive-text">Press delete or backspace to remove</span>  
                         </span>  
                       </span>  
                     </li>  
                   </ul>  
                 </div>  
               </div>  
               <div class="slds-text-title slds-m-top_x-small" aria-live="polite">1 Item(s) Selected</div>  
             </div>  
             <div class="slds-scrollable slds-grow">  
               <table role="grid" class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_resizable-cols slds-no-row-hover slds-scrollable_none">  
                 <thead>  
                   <tr class="slds-line-height_reset">  
                     <th scope="col" style="width: 3.75rem;"></th>  
                     <th aria-label="Name" aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col">  
                       <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">  
                         <span class="slds-assistive-text">Sort by: </span>  
                         <span class="slds-truncate" title="Name">Name</span>  
                         <div class="slds-icon_container">  
                           <!-- <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:arrowdown" class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon"/>  
                         </div>  
                       </a>  
                       <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>  
                       <div class="slds-resizable">  
                         <input type="range" min="20" max="1000" aria-label="Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-17" tabindex="-1" />  
                         <span class="slds-resizable__handle">  
                           <span class="slds-resizable__divider"></span>  
                         </span>  
                       </div>  
                     </th>  
                     <th aria-label="Product Code" aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col">  
                       <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">  
                         <span class="slds-assistive-text">Sort by: </span>  
                         <span class="slds-truncate" title="Product Code">Product Code</span>  
                         <div class="slds-icon_container">  
                           <!-- <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:arrowdown" class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon"/>  
                         </div>  
                       </a>  
                       <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>  
                       <div class="slds-resizable">  
                         <input type="range" min="20" max="1000" aria-label="Product Code column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-18" tabindex="-1" />  
                         <span class="slds-resizable__handle">  
                           <span class="slds-resizable__divider"></span>  
                         </span>  
                       </div>  
                     </th>  
                     <th aria-label="List Price" aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col">  
                       <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">  
                         <span class="slds-assistive-text">Sort by: </span>  
                         <span class="slds-truncate" title="List Price">List Price</span>  
                         <div class="slds-icon_container">  
                           <!--<svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:arrowdown" class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon"/>  
                         </div>  
                       </a>  
                       <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>  
                       <div class="slds-resizable">  
                         <input type="range" min="20" max="1000" aria-label="List Price column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-19" tabindex="-1" />  
                         <span class="slds-resizable__handle">  
                           <span class="slds-resizable__divider"></span>  
                         </span>  
                       </div>  
                     </th>  
                     <th aria-label="Product Family" aria-sort="none" class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col">  
                       <a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1">  
                         <span class="slds-assistive-text">Sort by: </span>  
                         <span class="slds-truncate" title="Product Family">Product Family</span>  
                         <div class="slds-icon_container">  
                           <!-- <svg class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">  
                             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" />  
                           </svg>-->  
                           <lightning:icon iconName="utility:arrowdown" class="slds-icon slds-icon_x-small slds-icon-text-default slds-is-sortable__icon"/>  
                         </div>  
                       </a>  
                       <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>  
                       <div class="slds-resizable">  
                         <input type="range" min="20" max="1000" aria-label="Product Family column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-20" tabindex="-1" />  
                         <span class="slds-resizable__handle">  
                           <span class="slds-resizable__divider"></span>  
                         </span>  
                       </div>  
                     </th>  
                   </tr>  
                 </thead>  
                 <tbody>  
                   <tr class="slds-hint-parent" aria-selected="true">  
                     <td role="gridcell" tabindex="0" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-26" tabindex="-1" value="on" />  
                         <label for="add-checkbox-26" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 1</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-27" tabindex="-1" value="on" />  
                         <label for="add-checkbox-27" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 2</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-28" tabindex="-1" value="on" />  
                         <label for="add-checkbox-28" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 3</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-29" tabindex="-1" value="on" />  
                         <label for="add-checkbox-29" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 4</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-30" tabindex="-1" value="on" />  
                         <label for="add-checkbox-30" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 5</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-31" tabindex="-1" value="on" />  
                         <label for="add-checkbox-31" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 6</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-32" tabindex="-1" value="on" />  
                         <label for="add-checkbox-32" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 7</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                   <tr class="slds-hint-parent">  
                     <td role="gridcell" tabindex="-1" class="slds-text-align_right" style="width: 3.75rem;">  
                       <div class="slds-checkbox_add-button">  
                         <input type="checkbox" class="slds-assistive-text" id="add-checkbox-33" tabindex="-1" value="on" />  
                         <label for="add-checkbox-33" class="slds-checkbox_faux">  
                           <span class="slds-assistive-text">Select item 8</span>  
                         </label>  
                       </div>  
                     </td>  
                     <th scope="row">  
                       <div class="slds-truncate" title="Analytics">Analytics</div>  
                     </th>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="ANTLY">ANTLY</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="5000.00">5000.00</div>  
                     </td>  
                     <td role="gridcell">  
                       <div class="slds-truncate" title="Analytics Product">Analytics Product</div>  
                     </td>  
                   </tr>  
                 </tbody>  
               </table>  
             </div>  
           </div>  
         </div>  
         <footer class="slds-modal__footer">  
           <button class="slds-button slds-button_neutral" onclick="{!c.cancelBtn}">Cancel</button>  
           <button class="slds-button slds-button_brand">Next</button>  
         </footer>  
       </div>  
     </section>  
     <div class="slds-backdrop slds-backdrop_open"></div>  
   </div>  
 </aura:component>  
ListBuilderController.js

below code line will dismiss the action button component popup.


 ({  
   cancelBtn : function(component, event, helper) {  
     //Close the action panel  
     var dismissActionPanel = $A.get("e.force:closeQuickAction");  
     dismissActionPanel.fire();  
   }  
 })  
Reactions

Post a Comment

4 Comments


  1. It is very useful information about salesforce . This is the place for learner and glad to be here in this blog Thank you
    salesforce Training in Hyderabad
    salesforce course in Hyderabad
    Enroll

    ReplyDelete
  2. Cloudy Code gets you future-ready with Salesforce. Implement your Salesforce CRM with Cloudy Code Certified Admin and Developers in Australia & New Zealand.
    Salesforce

    ReplyDelete
  3. Great post friend, Thank a lot to share this. You are doing good job. Keep posting.
    Salesforce Consulting India

    ReplyDelete
  4. Thank you for your post. This is superb information. It is amazing and great to visit your site.
    Android Course in Gurgaon

    ReplyDelete