Apex Code Development You need to sign in to do that
Don't have an account?
Anonymous Developer how to make 1 of each as a required field?
Here's my code:
If I were to put a value on Monday like the picture above I want the field beside it to be required if I were to push the proceed button which was not included in the screenshot. The same goes for the other days. The solution should go both ways if I were to put the value on the next dropbox the other field should be required as well. How do I do this?
Need Help. Thanks in advance
<template>
<div class="business-days-container">
<h4 class="header">{flowLabel}<abbr class="slds-required" hidden={required}>* </abbr></h4>
<template if:false={readonly}>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds lds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Monday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="monday_in" placeholder="HH:MM" label="" value={mondayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="monday_out" placeholder="HH:MM" label="" value={mondayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Tuesday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="tuesday_in" placeholder="HH:MM" label="" value={tuesdayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="tuesday_out" placeholder="HH:MM" label="" value={tuesdayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Wednesday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="wednesday_in" placeholder="HH:MM" label="" value={wednesdayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="wednesday_out" placeholder="HH:MM" label="" value={wednesdayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Thursday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="thursday_in" placeholder="HH:MM" label="" value={thursdayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="thursday_out" placeholder="HH:MM" label="" value={thursdayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Friday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="friday_in" placeholder="HH:MM" label="" value={fridayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="friday_out" placeholder="HH:MM" label="" value={fridayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Saturday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="saturday_in" placeholder="HH:MM" label="" value={saturdayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="saturday_out" placeholder="HH:MM" label="" value={saturdayVal.close}></lightning-input>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="day slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_3-of-12">Sunday</div>
<div class="day-time slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_9-of-12 inline-flex-wrap">
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="sunday_in" placeholder="HH:MM" label="" value={sundayVal.open}></lightning-input>
<span class="flex-item span-item"> to </span>
<lightning-input onchange={handleTimeChange} class="flex-item" read-only={readonly} type="time" variant="label-hidden" name="sunday_out" placeholder="HH:MM" label="" value={sundayVal.close}></lightning-input>
</div>
</div>
</template>
<template if:true={readonly}>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_1-of-3">Monday</div>
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_2-of-3 inline-flex-wrap">
<template if:true={mondayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={mondayClosed}>
<span class="span-item view-only uppercased">{mondayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{mondayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_1-of-3">Tuesday</div>
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_1-of-3 inline-flex-wrap">
<template if:true={tuesdayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={tuesdayClosed}>
<span class="span-item view-only uppercased">{tuesdayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{tuesdayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_1-of-3">Wednesday</div>
<div class="slds-col slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_1-of-3 inline-flex-wrap">
<template if:true={wednesdayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={wednesdayClosed}>
<span class="span-item view-only uppercased">{wednesdayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{wednesdayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds slds-size_1-of-3">Thursday</div>
<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_6-of-12 inline-flex-wrap">
<template if:true={thursdayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={thursdayClosed}>
<span class="span-item view-only uppercased">{thursdayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{thursdayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds slds-size_1-of-3">Friday</div>
<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_6-of-12 inline-flex-wrap">
<template if:true={fridayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={fridayClosed}>
<span class="span-item view-only uppercased">{fridayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{fridayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds slds-size_1-of-3">Saturday</div>
<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_6-of-12 inline-flex-wrap">
<template if:true={saturdayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={saturdayClosed}>
<span class="span-item view-only uppercased">{saturdayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{saturdayVal.close}</span>
</template>
</div>
</div>
<div class="day-wrap slds-grid slds-wrap slds-gutter">
<div class="slds slds-size_1-of-3">Sunday</div>
<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-1 slds-medium-size_12-of-12 slds-large-size_6-of-12 inline-flex-wrap">
<template if:true={sundayClosed}>
<span class="flex-item span-item view-only">Close</span>
</template>
<template if:false={sundayClosed}>
<span class="span-item view-only uppercased">{sundayVal.open}</span>
<span class="flex-item span-item view-only">to</span>
<span class="span-item view-only uppercased">{sundayVal.close}</span>
</template>
</div>
</div>
</template>
</div>
</template>
Need Help. Thanks in advance
You can have attributes for each element which ties to the required attriubte of the HTML element. Also each element should have an onchange event which sets the other attibute as true in tun making the element as required.
JS
import { LightningElement,api, track } from 'lwc'; import LOCALE from '@salesforce/i18n/locale'; export default class AsBusinessHoursLWC extends LightningElement { @api input; @api readonly; @api isRequired; @api output; @api flowLabel; @track sundayVal; @track mondayVal; @track tuesdayVal; @track wednesdayVal; @track thursdayVal; @track fridayVal; @track saturdayVal; @track sundayClosed = false; @track mondayClosed = false; @track tuesdayClosed = false; @track wednesdayClosed = false; @track thursdayClosed = false; @track fridayClosed = false; @track saturdayClosed = false; defaultsundayVal= { "open" : "", "close" : "" }; defaultmondayVal= { "open" : "", "close" : "" }; defaulttuesdayVal= { "open" : "", "close" : "" }; defaultwednesdayVal= { "open" : "", "close" : "" }; defaultthursdayVal= { "open" : "", "close" : "" }; defaultfridayVal= { "open" : "", "close" : "" }; defaultsaturdayVal= { "open" : "", "close" : "" }; @track parsedHours = [{ "monday" : '', "tuesday" : '', "wednesday" : '', "thursday" : '', "friday" : '', "saturday" : '', "sunday" : '', }]; defaultData = [{ "monday" : this.defaultmondayVal, "tuesday" : this.defaulttuesdayVal, "wednesday" : this.defaultwednesdayVal, "thursday" : this.defaultthursdayVal, "friday" : this.defaultfridayVal, "saturday" : this.defaultsaturdayVal, "sunday" : this.defaultsundayVal }]; status; connectedCallback(){ var inData = this.input; if(typeof inData != undefined && typeof inData != 'undefined' ){ console.log('data was here!!'); var days = JSON.parse(inData); this.parseDays(days); if(this.readonly){ console.log('readonly: '+this.readonly); if(this.mondayVal.open == '' && this.mondayVal.close == ''){ this.mondayClosed = true; console.log('mondayClosed: '+this.mondayClosed); }else{ this.mondayVal.open = this.parseTime(this.mondayVal.open); this.mondayVal.close = this.parseTime(this.mondayVal.close); } if(this.tuesdayVal.open == '' && this.tuesdayVal.close == ''){ this.tuesdayClosed = true; console.log('tuesdayClosed: '+this.tuesdayClosed); }else{ this.tuesdayVal.open = this.parseTime(this.tuesdayVal.open); this.tuesdayVal.close = this.parseTime(this.tuesdayVal.close); } if(this.wednesdayVal.open == '' && this.wednesdayVal.close == ''){ this.wednesdayClosed = true; console.log('wednesdayClosed: '+this.wednesdayClosed); }else{ this.wednesdayVal.open = this.parseTime(this.wednesdayVal.open); this.wednesdayVal.close = this.parseTime(this.wednesdayVal.close); } if(this.thursdayVal.open == '' && this.thursdayVal.close == ''){ this.thursdayClosed = true; console.log('thursdayClosed: '+this.thursdayClosed); }else{ this.thursdayVal.open = this.parseTime(this.thursdayVal.open); this.thursdayVal.close = this.parseTime(this.thursdayVal.close); } if(this.fridayVal.open == '' && this.fridayVal.close == ''){ this.fridayClosed = true; console.log('fridayClosed: '+this.fridayClosed); }else{ this.fridayVal.open = this.parseTime(this.fridayVal.open); this.fridayVal.close = this.parseTime(this.fridayVal.close); } if(this.saturdayVal.open == '' && this.saturdayVal.close == ''){ this.saturdayClosed = true; console.log('saturdayClosed: '+this.saturdayClosed); }else{ this.saturdayVal.open = this.parseTime(this.saturdayVal.open); this.saturdayVal.close = this.parseTime(this.saturdayVal.close); } if(this.sundayVal.open == '' && this.sundayVal.close == ''){ this.sundayClosed = true; console.log('sundayClosed: '+this.sundayClosed); }else{ this.sundayVal.open = this.parseTime(this.sundayVal.open); this.sundayVal.close = this.parseTime(this.sundayVal.close); } } console.log('days: '+this.mondayVal.open); }else{ this.status = 'blank'; this.parseDays(this.defaultData); } //this.output = JSON.stringify(this.parsedHours); //this.parseOutput(); } get required(){ return !this.isRequired; } parseTime(timeString){ var date = new Date(); var datetime = date.toLocaleDateString()+ ' '+ timeString; var data = Date.parse(datetime); var formattedNumber = new Intl.DateTimeFormat(LOCALE, { hour:"numeric", minute: "numeric", hour12: true}).format(data); return formattedNumber; } renderedCallback(){ this.parsedHours[0].monday = this.mondayVal; this.parsedHours[0].tuesday = this.tuesdayVal; this.parsedHours[0].wednesday = this.wednesdayVal; this.parsedHours[0].thursday = this.thursdayVal; this.parsedHours[0].friday = this.fridayVal; this.parsedHours[0].saturday = this.saturdayVal; this.parsedHours[0].sunday = this.sundayVal; if(this.mondayVal.open != '' || this.tuesdayVal.open != '' ||this.wednesdayVal.open != '' ||this.thursdayVal.open != '' ||this.fridayVal.open != '' ||this.saturdayVal.open != '' ||this.sundayVal.open != '' ){ this.status = 'filled'; }else{ this.status = 'blank' } this.output = JSON.stringify(this.parsedHours); this.input = this.output; //this.output = JSON.stringify(this.parsedHours); } parseDays( data ){ console.log('days: '+JSON.stringify(data[0])); this.mondayVal = data[0].monday; this.tuesdayVal = data[0].tuesday; this.wednesdayVal = data[0].wednesday; this.thursdayVal = data[0].thursday; this.fridayVal = data[0].friday; this.saturdayVal = data[0].saturday; this.sundayVal = data[0].sunday; } parseOutput(){ this.parsedHours[0].monday = this.mondayVal; this.parsedHours[0].tuesday = this.tuesdayVal; this.parsedHours[0].wednesday = this.wednesdayVal; this.parsedHours[0].thursday = this.thursdayVal; this.parsedHours[0].friday = this.fridayVal; this.parsedHours[0].saturday = this.saturdayVal; this.parsedHours[0].sunday = this.sundayVal; if(this.mondayVal.open != '' || this.tuesdayVal.open != '' ||this.wednesdayVal.open != '' ||this.thursdayVal.open != '' ||this.fridayVal.open != '' ||this.saturdayVal.open != '' ||this.sundayVal.open != '' ){ this.status = 'filled'; }else{ this.status = 'blank' } this.output = JSON.stringify(this.parsedHours); } handleTimeChange(event){ var value = event.target.value; var name = event.target.name; switch(name){ case 'monday_in' : this.mondayVal.open = value; break; case 'monday_out' : this.mondayVal.close = value; break; case 'tuesday_in' : this.tuesdayVal.open = value; break; case 'tuesday_out' : this.tuesdayVal.close = value; break; case 'wednesday_in' : this.wednesdayVal.open = value; break; case 'wednesday_out' : this.wednesdayVal.close = value; break; case 'thursday_in' : this.thursdayVal.open = value; break; case 'thursday_out' : this.thursdayVal.close = value; break; case 'friday_in' : this.fridayVal.open = value; break; case 'friday_out' : this.fridayVal.close = value; break; case 'saturday_in' : this.saturdayVal.open = value; break; case 'saturday_out' : this.saturdayVal.close = value; break; case 'sunday_in' : this.sundayVal.open = value; break; case 'sunday_out' : this.sundayVal.close = value; break; } if(this.mondayVal.open != '' || this.tuesdayVal.open != '' ||this.wednesdayVal.open != '' ||this.thursdayVal.open != '' ||this.fridayVal.open != '' ||this.saturdayVal.open != '' ||this.sundayVal.open != '' ){ this.status = 'filled'; }else{ this.status = 'blank' } } @api validate(){ console.log(this.attributes); if(this.isRequired == true && this.status == 'filled') { return { isValid: true }; } else { return { isValid: false, errorMessage: 'Please add your business hours.' }; } } }And I also added a button
Button HTML
<template> <div class="btn-parent" style="padding:25px 0;"> <template if:true={nextCheck}> <button style="background: 0% 0% no-repeat padding-box padding-box rgb(1, 104, 143); color: rgb(255, 255, 255); text-align: center; padding: 5px 26px; width: fit-content;" class="next-button slds-button slds-button_brand" name="Next Button" onclick={handleNext}>{nextButton}</button> </template> <template if:true={prevCheckCheck}> <button style="padding: 5px;margin: 5px;background: #E4E6EB 0% 0% no-repeat padding-box;border-radius: 4px;opacity: 1;color: #0E1111;text-align: center;width: fit-content;" class="prev-button slds-button slds-button_brand slds-float_right" name="Back Button" onclick={handleBack} >{prevButton}</button> </template> <template if:true={cancelCheck}> <button style="padding: 5px;margin: 5px;background: #E4E6EB 0% 0% no-repeat padding-box;border-radius: 4px;opacity: 1;color: #0E1111;text-align: center;width: fit-content;" class="cancel-button slds-button slds-button_brand slds-float_right" name="Cancel Button" onclick={closeAction}>{cancelButton}</button> </template> </div> </template>Button JS
import { LightningElement, api, track } from 'lwc'; import { FlowNavigationBackEvent, FlowNavigationNextEvent, FlowNavigationFinishEvent } from "lightning/flowSupport"; export default class AS_dynamicButton extends LightningElement { @api nextButton; @api prevButton; @api cancelButton; @api cancel_var; @api nextCheck; @api prevCheckCheck; @api cancelCheck; @api availableActions = []; handleNext() { if (this.availableActions.find((action) => action === "NEXT")) { console.log('for next') const navigateNextEvent = new FlowNavigationNextEvent(); this.dispatchEvent(navigateNextEvent); } } handleBack() { if (this.availableActions.find((action) => action === "BACK")) { console.log('for back') const navigateBackEvent = new FlowNavigationBackEvent(); this.dispatchEvent(navigateBackEvent); } } closeAction(){ console.log('NOTICE ME!!'); console.log( this.availableActions ); const navigateBackEvent = new FlowNavigationFinishEvent(); this.dispatchEvent(navigateBackEvent); } }Thanks in advance.