Add LWC to Salesforce mobile record page

Add LWC to Salesforce Mobile App Pages

Steps to add Lightning web component to Salesforce Mobile Record Page

  1. Build your Lwc component with the desired functionality. For example purpose, I will use a hello world component.
  2. Make your component compatible with Salesforce mobile app record pages by adding the below code to its meta.xml file.
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>55.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__RecordPage</target>
            <target>lightning__AppPage</target>
            <target>lightning__HomePage</target>
        </targets>
        <targetConfigs>
            <!-- Applying this config to all types of pages like record page, app page etc. -->
            <targetConfig targets="lightning__RecordPage,lightning__AppPage, lightning__HomePage">
                <supportedFormFactors>
                    <!-- Remove the below line if you want component to show onlyu on mobile devices. -->
                    <supportedFormFactor type="Large" /> 
                    <supportedFormFactor type="Small" />
                </supportedFormFactors>
            </targetConfig>
        </targetConfigs>
    </LightningComponentBundle>
    
  3. Deploy the component.
  4. Edit the record page where you want to add your component. Setup -> Object Manager -> Object -> Lightning Record Pages -> Edit the page. For example, I will go to the Contact's Lightning Record Page.
    Edit Lightning record page for an object
  5. Click edit on the record page and it will open Lightning App Builder.
  6. Switch the view to Phone from the top left section of App builder.
    Add lwc to lightning record page mobile view
  7. Search your component in the components list. Then drag and drop it onto the mobile record page.
    Add lwc to mobile view of lightning record page
  8. Save and activate the layout.
  9. Now, log in to Salesforce mobile app and open the record page, you should see the component over there.


Important Notes

* If you don't see the comp*onent in the mobile app make sure that you clear the cache from the mobile app settings. See the below steps.

  1. Tap on your avatar from the Salesforce mobile app.
  2. Select Settings.
  3. Select Advanced.
  4. Then tap on Clear Cached Data.

* Note that if you add your component only on the mobile view then it won't be visible on the desktop version of your record page.

* Some of the lightning components like Lightning Datatable are not supported on mobile devices.


I hope this was helpful! Please let me know in the comments if any questions.


No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com