Ar/adapt for mobile (#744)

* Adapt Lightning App to work on mobile * Make account record page available for small formFactor
trailheadapps · Oct 10, 2024 · ca42b65 · ca42b65
1 parent d097926
commit ca42b65
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 19 deletions.
diff --git a/force-app/main/default/applications/EBikes.app-meta.xml b/force-app/main/default/applications/EBikes.app-meta.xml
@@ -1,24 +1,40 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
-    <brand>
-        <headerColor>#C23335</headerColor>
-        <logo>logo</logo>
-        <logoVersion>1</logoVersion>
-        <shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
-    </brand>
     <actionOverrides>
         <actionName>View</actionName>
         <comment
-        >Action override created by Lightning App Builder on activation. Added manually because this isn't registered by force:source:pull.</comment>
+        >Action override created by Lightning App Builder on activation. Added manually because this isn&apos;t registered by force:source:pull.</comment>
         <content>Account_Record_Page</content>
         <formFactor>Large</formFactor>
         <skipRecordTypeSelect>false</skipRecordTypeSelect>
         <type>Flexipage</type>
         <pageOrSobjectType>Account</pageOrSobjectType>
     </actionOverrides>
+    <actionOverrides>
+        <actionName>View</actionName>
+        <comment
+        >Action override created by Lightning App Builder on activation. Added manually because this isn&apos;t registered by force:source:pull.</comment>
+        <content>Account_Record_Page</content>
+        <formFactor>Small</formFactor>
+        <skipRecordTypeSelect>false</skipRecordTypeSelect>
+        <type>Flexipage</type>
+        <pageOrSobjectType>Account</pageOrSobjectType>
+    </actionOverrides>
+    <brand>
+        <headerColor>#C23335</headerColor>
+        <logo>logo</logo>
+        <logoVersion>1</logoVersion>
+        <shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
+    </brand>
+    <formFactors>Small</formFactors>
     <formFactors>Large</formFactors>
+    <isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
+    <isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
+    <isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
+    <isOmniPinnedViewEnabled>false</isOmniPinnedViewEnabled>
     <label>E-Bikes</label>
     <navType>Standard</navType>
+    <setupExperience>all</setupExperience>
     <tabs>standard-home</tabs>
     <tabs>Product_Explorer</tabs>
     <tabs>standard-Account</tabs>

diff --git a/force-app/main/default/aura/pageTemplate_2_7_3/pageTemplate_2_7_3.cmp b/force-app/main/default/aura/pageTemplate_2_7_3/pageTemplate_2_7_3.cmp
@@ -6,10 +6,36 @@
     <aura:attribute name="left" type="Aura.Component[]" access="global" />
     <aura:attribute name="center" type="Aura.Component[]" access="global" />
     <aura:attribute name="right" type="Aura.Component[]" access="global" />
-
-    <div class="slds-grid slds-gutters">
-        <div class="slds-col slds-size_2-of-12 left">{!v.left}</div>
-        <div class="slds-col slds-size_7-of-12 center">{!v.center}</div>
-        <div class="slds-col slds-size_3-of-12 right">{!v.right}</div>
+    <div aura:id="container">
+        <aura:if isTrue="{!not($Browser.isPhone)}">
+            <!-- If Tablet or Desktop, 2-7-3 regions -->
+            <lightning:layout>
+                <lightning:layoutItem aura:id="leftColumn" size="2">
+                    {!v.left}
+                </lightning:layoutItem>
+                <lightning:layoutItem
+                    aura:id="centerColumn"
+                    size="7"
+                    class="center"
+                >
+                    {!v.center}
+                </lightning:layoutItem>
+                <lightning:layoutItem aura:id="rightColumn" size="3">
+                    {!v.right}
+                </lightning:layoutItem>
+            </lightning:layout>
+        </aura:if>
+        <aura:if isTrue="{!$Browser.isPhone}">
+            <!-- If Phone, single region -->
+            <lightning:layout>
+                <lightning:layoutItem
+                    aura:id="centerColumn"
+                    size="12"
+                    class="center"
+                >
+                    {!v.left} {!v.center} {!v.right}
+                </lightning:layoutItem>
+            </lightning:layout>
+        </aura:if>
     </div>
 </aura:component>
diff --git a/force-app/main/default/flexipages/Order_Record_Page.flexipage-meta.xml b/force-app/main/default/flexipages/Order_Record_Page.flexipage-meta.xml
@@ -93,6 +93,16 @@
                 </visibilityRule>
             </fieldInstance>
         </itemInstances>
+        <itemInstances>
+            <fieldInstance>
+                <fieldInstanceProperties>
+                    <name>uiBehavior</name>
+                    <value>none</value>
+                </fieldInstanceProperties>
+                <fieldItem>Record.Status__c</fieldItem>
+                <identifier>RecordStatus_cField</identifier>
+            </fieldInstance>
+        </itemInstances>
         <name>Facet-24481a15-ff0a-486e-9b84-705cee2963d1</name>
         <type>Facet</type>
     </flexiPageRegions>
@@ -257,12 +267,6 @@
                 <identifier>forceMobileDetail</identifier>
             </componentInstance>
         </itemInstances>
-        <itemInstances>
-            <componentInstance>
-                <componentName>orderBuilder</componentName>
-                <identifier>orderBuilder</identifier>
-            </componentInstance>
-        </itemInstances>
         <mode>Replace</mode>
         <name>detailTabContent</name>
         <type>Facet</type>
@@ -326,6 +330,12 @@
         <type>Region</type>
     </flexiPageRegions>
     <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>orderBuilder</componentName>
+                <identifier>c_orderBuilder</identifier>
+            </componentInstance>
+        </itemInstances>
         <itemInstances>
             <componentInstance>
                 <componentInstanceProperties>

diff --git a/force-app/main/default/lwc/accountMap/accountMap.js-meta.xml b/force-app/main/default/lwc/accountMap/accountMap.js-meta.xml
@@ -11,7 +11,10 @@
             <objects>
                 <object>Account</object>
             </objects>
+            <supportedFormFactors>
+                <supportedFormFactor type="Large" />
+                <supportedFormFactor type="Small" />
+            </supportedFormFactors>
         </targetConfig>
     </targetConfigs>
-
 </LightningComponentBundle>
diff --git a/force-app/main/default/lwc/orderBuilder/orderBuilder.js-meta.xml b/force-app/main/default/lwc/orderBuilder/orderBuilder.js-meta.xml
@@ -15,6 +15,10 @@
             <objects>
                 <object>Order__c</object>
             </objects>
+            <supportedFormFactors>
+                <supportedFormFactor type="Large" />
+                <supportedFormFactor type="Small" />
+            </supportedFormFactors>
         </targetConfig>
     </targetConfigs>
 </LightningComponentBundle>
diff --git a/force-app/main/default/lwc/orderStatusPath/orderStatusPath.js-meta.xml b/force-app/main/default/lwc/orderStatusPath/orderStatusPath.js-meta.xml
@@ -7,4 +7,12 @@
     <targets>
         <target>lightning__RecordPage</target>
     </targets>
+     <targetConfigs>
+        <targetConfig targets="lightning__RecordPage">
+            <supportedFormFactors>
+                <supportedFormFactor type="Large" />
+                <supportedFormFactor type="Small" />
+            </supportedFormFactors>
+        </targetConfig>
+    </targetConfigs>
 </LightningComponentBundle>
diff --git a/force-app/main/default/lwc/productTileList/productTileList.js-meta.xml b/force-app/main/default/lwc/productTileList/productTileList.js-meta.xml
@@ -25,6 +25,10 @@
             <objects>
                 <object>Order__c</object>
             </objects>
+            <supportedFormFactors>
+                <supportedFormFactor type="Large" />
+                <supportedFormFactor type="Small" />
+            </supportedFormFactors>
         </targetConfig>
         <targetConfig targets="lightningCommunity__Default">
             <property

diff --git a/force-app/main/default/lwc/similarProducts/similarProducts.js-meta.xml b/force-app/main/default/lwc/similarProducts/similarProducts.js-meta.xml
@@ -13,6 +13,10 @@
             <objects>
                 <object>Product__c</object>
             </objects>
+            <supportedFormFactors>
+                <supportedFormFactor type="Large" />
+                <supportedFormFactor type="Small" />
+            </supportedFormFactors>
         </targetConfig>
         <targetConfig targets="lightningCommunity__Default">
             <property