function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shravan Kumar 71Shravan Kumar 71 

Expose LWC in Mobile App

I am trying to add a custom LWC to a phone record page however getting the below error message. Could anyone help me out how to make the component mobile viewable.

User-added image
Best Answer chosen by Shravan Kumar 71
Khan AnasKhan Anas (Salesforce Developers) 
Hi Shravan,

Greetings to you!

You can configure a component to display on a Lightning app page when the page is rendered in desktop format (Large), phone format (Small), or both.

In the <targetConfigs> section of the component’s configuration file, use the <supportedFormFactors> tag set to declare which form factors the component supports for a page type.

App pages support the Large and Small form factors. Record and Home pages support only the Large form factor.

Small—Represents the phone form factor. Supported for lightning__AppPage only.

Also, make sure to add your LWC to lightning__AppPage.
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>42.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="prop2" type="Boolean" />
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <property name="prop1" type="String" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning_HomePage">
            <property name="prop3" type="Integer" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Please refer to the below links which might help you further.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_form_factors

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_configuration_tags

https://developer.salesforce.com/docs/component-library/documentation/lwc/use

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Shravan,

Greetings to you!

You can configure a component to display on a Lightning app page when the page is rendered in desktop format (Large), phone format (Small), or both.

In the <targetConfigs> section of the component’s configuration file, use the <supportedFormFactors> tag set to declare which form factors the component supports for a page type.

App pages support the Large and Small form factors. Record and Home pages support only the Large form factor.

Small—Represents the phone form factor. Supported for lightning__AppPage only.

Also, make sure to add your LWC to lightning__AppPage.
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>42.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="prop2" type="Boolean" />
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <property name="prop1" type="String" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning_HomePage">
            <property name="prop3" type="Integer" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Please refer to the below links which might help you further.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_form_factors

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_configuration_tags

https://developer.salesforce.com/docs/component-library/documentation/lwc/use

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
chandu kari 8chandu kari 8
I am trying same format on metadata of LWC, But here i am getting Error

this is i am getting.
IT Support EnessIT Support Eness
Remove the lines "<property name="prop1" type="String" />" if you don't have any properties to pass.
Surinderjit S BajwaSurinderjit S Bajwa

Hi Khan, your post is really helpful.

I just want to update the now "Small" is also supported by "lightning__RecordPage"

<targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
</targetConfigs>