function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Akis AthanasiadisAkis Athanasiadis 

Lightning component customization

I have created a lightning component that executes a screen flow which is running on "New".
How can I customize the layout of the lightning component?
For example, i want to have 2 columns and set specific fields insise these columns.
GauravGargGauravGarg

Hi Akis,

Please use Lightning force:createRecord Form functionality to create records. Here is the documentation (https://trailhead.salesforce.com/en/content/learn/modules/lightning_app_builder/lightning_app_builder_recordpage) 

Likewise, we have for force:editRecord. 

However, if the requirement is to create custom logic that includes two fields then go with input-fields (https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/documentation). Documentation links attached. 

Thanks,

Gaurav
Skype: gaurav62990
 
Akis AthanasiadisAkis Athanasiadis
Hello Gaurav,

I mentioned layout not logic
GauravGargGauravGarg
Hi Akis,

Create an <Table> in Lightning Component with 2 <TR> and add your fields within this.  
<Table>

    <Head>
        <TH> Header 1 </th>
        <TH> Header 2 </TH>
    </head>

    <Body>
        <TR>
            <TD> field 1: </TD>
            <TD> field 2: </TD>
        </TR>
        <TR>
            <TD> field 1: </TD>
            <TD> field 2: </TD>
        </TR>
    </Body>

    </HTML>

THanks,
Gaurav
Akis AthanasiadisAkis Athanasiadis
Ok...this needs to go in the main component? As I haven't does this again I will need some help here.
In which one of these I type this code?
User-added image
Additionally, as I may have multiple screens of fields displayed per screen, do I need to do something else or I put everything in there regardless the screen the field might appear?
GauravGargGauravGarg
Yes, this needs to go in the Component section. The fields need to arranged based on the Screen.

Do all the Screen get values from the Same component? how are you controlling it? else, place these into multiple component where you want to display in the Screen. 

Thanks,
Gaurav
Skype: gaurav62990
Akis AthanasiadisAkis Athanasiadis
This is the flow.
User-added image
Everything runs through one flow. Accordin to the decision making throughout hte process, different fields and options will be displayed
GauravGargGauravGarg
yes, so in this case.  You need to pass a parameter to the Component for eg: 
<Table>

    <Head>
        <TH> Header 1 </th>
        <TH> Header 2 </TH>
    </head>

    <Body>
        <Aura:If isTrue="{!param1}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </aura:if>
        <Aura:If isTrue="{!param3}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </aura:if>
        <Aura:If isTrue="{!param2}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </aura:if>
        <Aura:set="else">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
            </aura:if>
    </Body>

    </HTML>


Pass a parameter to Component so that it can identify which fields need to be displayed. Check particularly the "param1" or "param2" these are the apex variables. 

Also, add these variables in the "Design" of the component. 

Thanks

Gaurav
Akis AthanasiadisAkis Athanasiadis
Please take a look at this:
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:availableForFlowActions" access="global" > 
<aura:attribute name="recordId" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.init}" /> 
    <lightning:flow aura:id="flowId" onstatuschange="{!c.handleStatusChange}" /> 
    <Table>

    <Head>
        <TH> Header 1 </TH>
        <TH> Header 2 </TH>
    </Head>

    <Body>
        <Aura:If isTrue="{!Payment1}">
            <TR>
                <TD> field 1: scr_title_payment </TD>
                <TD> field 2: scr_Date_payment </TD>
            </TR>
            <TR>
                <TD> field 3: scr_Comments_payment </TD>
            </TR>
        </Aura:If>
        <Aura:If isTrue="{!param3}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </Aura:If>
        <Aura:If isTrue="{!param2}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </Aura:If>

    </Body>

    </Table>
</aura:component>

I have added in the first decision 2 fields as in one column. then i have created another TR where I put the other variable.
Is the logic correct?
Also how whould I pass this in the design?
GauravGargGauravGarg
@Akis, Thanks
Akis AthanasiadisAkis Athanasiadis
you've totally lost me now.
1) what I did above is correct?
2) if not what is incorrect?
3) in addition to this you mentioned that I need to add these variables in the design. What do I type there? Your last answer refers to the main component only.
GauravGargGauravGarg
#1: yes, this is correct, besides this, you need to add following in Lightning component:
  • Create a aura:attribute for "Payment1" that is used in <aura:if>
and, this in Lightning Component Design document:
  • Add this attribute "payment1" on Design document for the lightning component. Check this link (https://biernuage.com/2018/11/11/how-to-pass-input-value-from-lightning-flow-to-lightning-component/)
and, while calling this Lightning component from Lightning Flow pass the value for Attribute "Payment1". 

Thats all. 

Thanks 
Akis AthanasiadisAkis Athanasiadis
do I need to create aura attributes for all fields - decisions in teh flow?
GauravGargGauravGarg
no, You can set one attribute with different value eg:
  
Component:

<aura:attribute name="sectionName" default="first" />

<aura:if isTrue="{!sectionName == 'first'}">
// field to display
</aura:if>

<aura:if isTrue="{!sectionName == 'middle'}">
// field to display
</aura:if>

<aura:if isTrue="{!sectionName == 'last'}">
// field to display
</aura:if>
  
Design:

<design:component>
<design:attribute name="sectionName" label="Section Name" description="Flow Section Name" required="true"/>
</design:component>

 
Akis AthanasiadisAkis Athanasiadis
Can you check the component code
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:availableForFlowActions,lightning:availableForFlowScreens" access="global" > 
<aura:attribute name="recordId" type="String" />
<aura:attribute name="sectionName" type="String"  access="global"/>
<aura:handler name="init" value="{!this}" action="{!c.init}" /> 
<lightning:flow aura:id="flowId" onstatuschange="{!c.handleStatusChange}" /> 
    <Table>

    <Head>
        <TH> Header 1 </TH>
        <TH> Header 2 </TH>
    </Head>

    <Body>
        <Aura:If isTrue="{!sectionName=='Comsys_Assets'}">
            <TR>
                <TD> field 1: {!scr_code_CA} </TD>
                <TD> field 2: {!Purchase_Typescr_Title_CA} </TD>
                <TD> field 3: {!scr_Date_comsys_asset} </TD>
                <TD> field 4: {!scr_amount_comsys_asset} </TD>
            </TR>
            <TR>
                <TD> field 1: {!scr_Title_CA} </TD>
                <TD> field 2: {!scr_vendor_comsys_asset} </TD>
                <TD> field 3: {!scr_comments_comsys_asset} </TD>
            </TR>
        </Aura:If>
        <Aura:If isTrue="{!param3}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </Aura:If>
        <Aura:If isTrue="{!param2}">
            <TR>
                <TD> field 1: </TD>
                <TD> field 2: </TD>
            </TR>
        </Aura:If>

    </Body>

    </Table>
</aura:component>

Also this is the design: 
<design:component>
<design:attribute name="sectionName" label="New_Comsys_Asset" description="New_Comsys_Asset" required="true"/>
</design:component>

I assume that  the label and the desctiption is not something of great importance here. Is that correct?

As for the "while calling this Lightning component from Lightning Flow pass the value for Attribute "XXX", I am missing that point.
I take all the input variables, I assign them on local ones?
How is this helping me out? I understand this might help in case of screen variables, that are not part of the fields - objects, and how I would like to present them in the component.
 
GauravGargGauravGarg

@Akis,

Absolutely, this looks good.

Now you have all the input variable from the Flow and the Design component ready. Just need to pass the value for label "New_Comsys_Asset" from the flow. 

Now embed this component on the FLow. check this URL (https://www.jitendrazaa.com/blog/salesforce/embed-lightning-component-in-flow/)

You are all set to make it work just little changes as per the URL above. 

Thanks,

Gaurav
Akis AthanasiadisAkis Athanasiadis
where is this lightning component in the flow? every article has the old layout of the flow which is quite different to the current one.
GauravGargGauravGarg
add following "lightning:availableForFlowScreens" in component
  
<aura:component implements="lightning:availableForFlowScreens" access="global">

Now open you flow screen, on the left side scroll to the bottom. You will find your Component name. 

Thanks
Akis AthanasiadisAkis Athanasiadis
I had already added this one but I do not see the component either in the manager or in the elements.
Akis AthanasiadisAkis Athanasiadis
I assume I do this via the actions.
I have done this through the action and I have set as input variable the recordId but still I do not see the layout that I have set 
GauravGargGauravGarg
I can see it in the "Screen" component of the Lightning Flow. 
Akis AthanasiadisAkis Athanasiadis
you were right.
So, i followed the instructions from the URL as well

User-added image

Still the layout is not working as expected. i get the same layout :(
GauravGargGauravGarg
yes, this will work when it running not while displaying on the edit page. Try running it and check what are the changes that required to be added. 
Akis AthanasiadisAkis Athanasiadis
i have already run it. I have tried to run on "NEW" but it didn't work :(
GauravGargGauravGarg
is there a way I can see into it? Its harder to explain over here in comments. 
Akis AthanasiadisAkis Athanasiadis
i've sent you an IM in skype