Icon Picker for Flow Screens and Custom Property Editors

Icon Picker for Flow Screens and Custom Property Editors

Components like Datatable allow the user to select a Salesforce Icon from the Lightning Design System but up until now you had to know the exact name and formatting for the icon. Examples: standard:account or utility:color_swatch

With the new fsc_pickIcon component, you can add a visual icon picker to your Flow Screen and developers can include it in a Custom Property Editor or other Lightning Web Components. This component is based on some code from the Salesforce Labs AppExchange app Activity Timeline.

The user starts by selecting the Icon Type (Standard, Action, Custom or Utility). One can further narrow down their choices by entering a search or filter term in the box above the icon list.

Usage

Drag the custom component Pick an Icon onto a Flow Screen. Use the Output Parameter iconName to reference the icon selected by the user.

Parameters

Input

none

Output

iconName – Name of the selected icon in the format of type:name

Installation

12/30/20Eric Smith – Version 1.0.0

This component is included as part of the FlowScreenComponentsBasePack Version 2.1.2 or later.

Developer Notes

Use in a Custom Property Editor

When referencing the Icon Picker in your CPE HTML file, the only attribute you need to specify is the oniconselection handler.

<c-fsc_pick-icon
    oniconselection={handlePickIcon}>
</c-fsc_pick-icon>

In your JavaScript file, the selected icon name will be passed in event.detail.

handlePickIcon(event) {
    let changedAttribute = 'tableIcon';
    this.inputValues[changedAttribute].value = event.detail;
    this.dispatchFlowValueChangeEvent(changedAttribute, event.detail, 'String');
}

Use in a Lightning Web Component

This example shows the Icon Picker exposed in a Modal window. In addition to specifying the oniconselection handler, you can specify the height in pixels for the first (SELECT TYPE) tab. At least 100 is recommended so narrow windows can display all of the other tab names in a drop-down without having to scroll.

<!-- Input dialog for entering Column Icon values -->
<template if:true={isOpenIconInput}>
    <div style="height: 400px;">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-00" aria-modal="true" aria-describedby="modal-content-id-0" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header slds-modal__header_empty">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCloseIconModal}>
                        <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-0">
                    <c-fsc_pick-icon
                        first-tab-height="100"
                        oniconselection={handlePickIcon}>
                    </c-fsc_pick-icon>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick={handleCloseIconModal}>Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={handleCommitIconSelection}>Save</button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </div>
</template>

Your handler can reference event.detail to get the name of the selected icon.

handlePickIcon(event) {
    this.selectedIcon = event.detail;
}