You need to sign in to do that
Don't have an account?
Bob 11
Make Lightning Component mobile friendly
I have a lightning component that is used in a customer community and needs to be updated so it is mobile friendly. I have not done this before and would like some help with updating my code below. Right now it does not render well at all.
<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId,flexipage:availableForRecordHome" access="global" controller="acme_fsl_AppointmentBooking"> <aura:attribute name="debug" type="Boolean" default="false"/> <aura:attribute name="loading" type="Boolean" default="true"/> <aura:attribute name="showSpinner" type="Boolean" default="true"/> <aura:attribute name="isEligible" type="Boolean" default="true"/> <aura:attribute name="showError" type="Boolean" default="false"/> <aura:attribute name="errorMessage" type="String"/> <aura:attribute name="rowCount" type="Integer" default="4"/> <aura:attribute name="isOpen" type="boolean" default="false"/> <aura:attribute name="data" type="Object" default="{}"/> <aura:attribute name="slotList" type="List" default="[]"/> <aura:attribute name="allSlots" type="List" default="[]"/> <aura:attribute name="workOrderId" type="Id"/> <aura:attribute name="serviceAppointmentId" type="Id"/> <aura:attribute name="selectedDate" type="Date"/> <aura:attribute name="todayDate" type="Date"/> <aura:attribute name="currentUser" type="User"/> <force:recordData aura:id="recordLoader" recordId="{!$SObjectType.CurrentUser.Id}" fields="Account.BillingStreet, Account.BillingCity, Account.BillingState, Account.BillingCountry, Account.BillingPostalCode" targetFields="{!v.currentUser}"/> <aura:handler name="init" value="{!this}" action="{!c.initCmpData}"/> <aura:handler name="change" value="{!v.selectedDate}" action="{!c.getFilterApptSlots}"/> <aura:if isTrue="{!v.debug}"> Debug<br/> recId {!v.recordId}<br/> data {!v.data.slots.length}<br/> todayDate {!v.todayDate}<br/> selectedDate {!v.selectedDate}<br/> isEligible {!v.isEligible} <br/> </aura:if> <aura:if isTrue="{!v.loading}"> <aura:if isTrue="{!v.showSpinner}"> <lightning:spinner/> </aura:if> <aura:set attribute="else"> <aura:if isTrue="{!v.isEligible}"> <div class="cmpWrapper"> <lightning:layout multipleRows="true"> <lightning:layoutItem size="4" padding="around-small"> <span class="calWrapper"> <center> <c:DatePicker aura:id="closeDate" label="Select a preferred appointment date to view availability" placeholder="Date" value="{!v.selectedDate}" formatSpecifier="MM/dd/yyyy" /> </center> </span> <br/> <aura:if isTrue="{!v.isEligible}"> <center><br/> <div class="slds-float_leftX additionalOption slds-p-bottom_xx-small"> <h2> Not seeing any results or can’t find an appointment that fits your needs? Contact us at (800) 422-5365.</h2> </div> </center> <br/> </aura:if> <center> <!-- removing create a case access--> <!-- <a href="./contactsupport"> <lightning:button label="Create Case" variant="brand"/> </a> --> </center> </lightning:layoutItem> <lightning:layoutItem size="8" padding="around-small"> <span class="slotsWrapper"> <center> <aura:iteration items="{!v.slotList}" var="slot" indexVar="i"> <aura:if isTrue="{!(i > v.rowCount) == false}"> <c:AdVic_BookingSlot slot="{!slot}" workOrderId="{!v.workOrderId}" serviceAppointmentId="{!v.serviceAppointmentId}"/> </aura:if> </aura:iteration> <lightning:button label="Display Additional Appointments" onclick="{!c.showMore}" variant="brand"/> </center> </span> </lightning:layoutItem> </lightning:layout> </div> <aura:set attribute="else"> <lightning:icon iconName="utility:warning" alternativeText="Customer Not Eligible" variant="Warning" title="Not Eligible" class="notification-icon"/> <aura:if isTrue="{!v.showError}"> <div id="error"> <!-- <lightning:input value="{!v.errorMessage}" readonly="true"/>--> </div> <aura:set attribute="else"> <br/> </aura:set> </aura:if> <br/> <span>{!v.errorMessage}</span> </aura:set> </aura:if> </aura:set> </aura:if> <br/> <br/> </aura:component>
Check below references and list of components for mobile compatible.
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.mobile
https://salesforce.stackexchange.com/questions/228065/lightning-component-mobile-compatibility
Thanks,