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
Jingli Hu 3Jingli Hu 3 

how to make custom page template available for mobile

I have created a custom page template with header, 3 columns , main and right sidebar. but it is only for desktop, but mobile. How can I make it mobile avaible too?

Code I have:
<aura:component implements="lightning:recordHomeTemplate" access="global" description="Header, 3 Columns , main and right sidebar" >
    <aura:attribute name="header" type="Aura.Component[]" description="Header"/>
    <aura:attribute name="column1" type="Aura.Component[]" description="Column1"/>
    <aura:attribute name="column2" type="Aura.Component[]" description="Column2"/>
    <aura:attribute name="column3" type="Aura.Component[]" description="Column3"/>
    <aura:attribute name="main" type="Aura.Component[]" description="main"/>
    <aura:attribute name="rightSidebar" type="Aura.Component[]" description="rightSidebar"/>
    <div>
        <div>{!v.header}</div>
        <lightning:layout class="slds-m-top_medium">
            <lightning:layoutItem size="4">
                {!v.column1}
            </lightning:layoutItem>
            <lightning:layoutItem size="4">
                {!v.column2}
            </lightning:layoutItem> 
            <lightning:layoutItem size="4">
                {!v.column3}
            </lightning:layoutItem>             
        </lightning:layout>
        <lightning:layout class="slds-m-top_medium">
            <lightning:layoutItem size="8">
                {!v.main}
            </lightning:layoutItem>
            <lightning:layoutItem size="4">
                {!v.rightSidebar}
            </lightning:layoutItem> 8       
        </lightning:layout>
        <div>{!v.footer}</div>
    </div>
    
</aura:component>

in Design
<design:component label="Header, 3 Columns , main and right sidebar">
    <flexipage:template>
        <flexipage:region name="header" defaultWidth="LARGE" />
        <flexipage:region name="column1" defaultWidth="SMALL" />
        <flexipage:region name="column2" defaultWidth="SMALL" />
        <flexipage:region name="column3" defaultWidth="SMALL" />
        <flexipage:region name="main" defaultWidth="MEDIUM" />
        <flexipage:region name="rightSidebar" defaultWidth="MEDIUM" />
    </flexipage:template>
</design:component>
AnudeepAnudeep (Salesforce Developers) 
Hi Jingli, 

When custom templates are viewed on a desktop, its right column takes up 30% (4 SLDS columns). The left column takes up the remaining 70% of the page width. On non-desktop form factors, the columns display as 50/50.

Can you try using the flexipage:formFactor tag in your design file

flexipage:formFactor

Use this tag to specify how much space the component takes on the page based on the type of device that it renders on. Add this tag as a child of the flexipage:region tag. Use multiple flexipage:formFactor tags per flexipage:region to define flexible behavior across form factors.

Reference: https://developer.salesforce.com/docs/atlas.en-us.224.0.lightning.meta/lightning/components_config_for_app_builder_template_component.htm
  
<flexipage:region name="right" label="Right Region" defaultWidth="Large">
    <flexipage:formFactor type="Large" width="Large" /> 
    <flexipage:formFactor type="Medium" width="Small" />
</flexipage:region>

I am recommending making changes to design because the design resource controls what kind of page can be built on the template.

The design resource specifies:
  1. What regions a page that uses the template must have.
  2. What kinds of components can be put into the page’s regions.
  3. How much space the component takes on the page based on the type of device that it renders on.
  4. What device form factors the component supports
Anudeep