Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A rough sketch how to make individual fields pretty in a flow using a lightning card
<aura:component implements="lightning:availableForFlowScreens" access="global">
<aura:attribute name="valueProvidedByFlow" type="String" />
<aura:attribute name="labelForValue" type="String" />
<aura:attribute name="type" type="String" description="currency, decimal, text supported"/>
<aura:attribute name="icon" type="String" default="standard:account" description="any icon from slds"/>
<lightning:card iconName="{!v.icon}" >
<aura:set attribute="title">
{!v.labelForValue}
<aura:if isTrue="{!v.type == 'currency'}">
<lightning:formattedNumber value="{!v.valueProvidedByFlow}" maximumFractionDigits="2" style="currency" class="slds-p-around_medium" />
</aura:if>
<aura:if isTrue="{!v.type == 'decimal'}">
<lightning:formattedNumber value="{!v.valueProvidedByFlow}" maximumFractionDigits="0" style="decimal" class="slds-p-around_medium" />
</aura:if>
<aura:if isTrue="{!v.type == 'text'}">
<lightning:formattedText value="{!v.valueProvidedByFlow}" class="slds-p-around_medium"/>
</aura:if>
</aura:set>
</lightning:card>
</aura:component>
<design:component >
<design:attribute name="valueProvidedByFlow" label="value" />
<design:attribute name="labelForValue" label="title" />
<design:attribute name="type" label="type"/>
<design:attribute name="icon" label="icon"/>
</design:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment