Lightning Component for Hours of Operation

Often we have a business use case from sales users to be able to capture Hours of Operation from their customers. Here we are going to build a reusable Lightning Component that we can place on any Object (Standard or Custom) detail page.

Below are Code blocks that assembles to form our Lightning Component!

Controller Class:
Note** Just make sure to create a custom field with Api "Hours__c" on any sObject that you want to place this Component and update Hours.
 public class HoursOfOperation {       
   @AuraEnabled  
   public static String getUpdtHrs(String sObjName, String sObjId, String hrs) {  
     try {  
       //query string to pull specific record to update hours  
       String qry = 'Select Id, Name, Hours__c From ' + sObjName + ' Where Id=\'' + sObjId +'\'' + ' Limit 1';        
       List<sObject> lstRcds = Database.query(qry);  
       //check if above query returns atleast one record  
       if (lstRcds.size() > 0) {  
         for (sObject obj: lstRcds) {  
           //assign hours of operation to the record field  
           obj.put('Hours__c', hrs);  
         }  
         //update record  
         update lstRcds;  
       }  
       return 'Successfully updated Hours!';     
     } catch(exception e) {  
       return 'Exception Occured: ' + e.getMessage();  
     }  
   }  
 }  
Above "getUpdtHrs" method accepts three parameter (sObject Name, sObject record id, and hours of operation string) and uses a dynamic soql to query based on record id that was passed and update current records hours of operation field value.

Component Code:
 <aura:component controller="HoursOfOperation" implements="force:lightningQuickAction,force:hasRecordId,force:hasSObjectName,flexipage:availableForAllPageTypes" access="global">  
   <aura:handler name="init" value="{!this}" action="{!c.inputVals}" />  
   <aura:attribute name="recordId" type="Id" />  
   <aura:attribute name="accountId" type="String" default="{!v.recordId}"/>  
   <div class="card-list-heading" align="center">  
     <b>Record Id: {!v.accountId}</b><br/>  
     <b>Object Name: {!v.sObjectName}</b>  
   </div>  
   <center>  
     <ui:button label="Save Hours" aura:id="button" press="{!c.updtHrs}"/><br/><br/>  
     <div>  
       <ui:inputCheckbox label="Open 24x7" aura:id="247id"/>  
     </div>  
   </center>  
   <div>Monday From: <ui:inputSelect aura:id="mndy1" /> To: <ui:inputSelect aura:id="mndy2" /> <br/>      
     Tuesday From: <ui:inputSelect aura:id="tsdy1" /> To: <ui:inputSelect aura:id="tsdy2" /> <br/>      
     Wednesday From: <ui:inputSelect aura:id="wsdy1" /> To: <ui:inputSelect aura:id="wsdy2" /> <br/>      
     Thursday From: <ui:inputSelect aura:id="thsdy1" /> To: <ui:inputSelect aura:id="thsdy2" /> <br/>      
     Friday From: <ui:inputSelect aura:id="frdy1" /> To: <ui:inputSelect aura:id="frdy2" /> <br/>      
     Saturday From: <ui:inputSelect aura:id="stdy1" /> To: <ui:inputSelect aura:id="stdy2" /> <br/>      
     Sunday From: <ui:inputSelect aura:id="sndy1" /> To: <ui:inputSelect aura:id="sndy2" />   
   </div>  
 </aura:component>  
Here we are implementing "force:hasRecordId" and "force:hassObjectName" in order to get current record id and sObject name. Also we are using an inputuCheckbox (To default hours if checked) and inputSelect fields for user to be able to select hours (I have used operating hours with an increment of One Hour, we can extended our list for 15, 30, and 45 minutes increment too)

Component Controller Code:
 ({  
   inputVals : function(component, event, helper) {  
     var pickLstVals = [  
       { class: "optionClass", label: "None", value: "None" },  
       { class: "optionClass", label: "01:00 AM", value: "01:00" },  
       { class: "optionClass", label: "02:00 AM", value: "02:00" },  
       { class: "optionClass", label: "03:00 AM", value: "03:00" },  
       { class: "optionClass", label: "04:00 AM", value: "04:00" },  
       { class: "optionClass", label: "05:00 AM", value: "05:00" },  
       { class: "optionClass", label: "06:00 AM", value: "06:00" },  
       { class: "optionClass", label: "07:00 AM", value: "07:00" },  
       { class: "optionClass", label: "08:00 AM", value: "08:00" },  
       { class: "optionClass", label: "09:00 AM", value: "09:00" },  
       { class: "optionClass", label: "10:00 AM", value: "10:00" },  
       { class: "optionClass", label: "11:00 AM", value: "11:00" },  
       { class: "optionClass", label: "12:00 PM", value: "12:00" },  
       { class: "optionClass", label: "01:00 PM", value: "13:00" },  
       { class: "optionClass", label: "02:00 PM", value: "14:00" },  
       { class: "optionClass", label: "03:00 PM", value: "15:00" },  
       { class: "optionClass", label: "04:00 PM", value: "16:00" },  
       { class: "optionClass", label: "05:00 PM", value: "17:00" },  
       { class: "optionClass", label: "06:00 PM", value: "18:00" },  
       { class: "optionClass", label: "07:00 PM", value: "19:00" },  
       { class: "optionClass", label: "08:00 PM", value: "20:00" },  
       { class: "optionClass", label: "09:00 PM", value: "21:00" },  
       { class: "optionClass", label: "10:00 PM", value: "22:00" },  
       { class: "optionClass", label: "11:00 PM", value: "23:00" },  
       { class: "optionClass", label: "12:00 AM", value: "00:00" },  
       { class: "optionClass", label: "Closed", value: "Closed" }  
     ]  
     component.find("mndy1").set("v.options", pickLstVals);  
     component.find("mndy2").set("v.options", pickLstVals);  
     component.find("tsdy1").set("v.options", pickLstVals);  
     component.find("tsdy2").set("v.options", pickLstVals);  
     component.find("wsdy1").set("v.options", pickLstVals);  
     component.find("wsdy2").set("v.options", pickLstVals);  
     component.find("thsdy1").set("v.options", pickLstVals);  
     component.find("thsdy2").set("v.options", pickLstVals);  
     component.find("frdy1").set("v.options", pickLstVals);  
     component.find("frdy2").set("v.options", pickLstVals);  
     component.find("stdy1").set("v.options", pickLstVals);  
     component.find("stdy2").set("v.options", pickLstVals);  
     component.find("sndy1").set("v.options", pickLstVals);  
     component.find("sndy2").set("v.options", pickLstVals);  
   },  
   updtHrs : function(component, event, helper) {  
     var action = component.get("c.getUpdtHrs");  
     var openHrs;  
     if (component.find("247id").get("v.value")) {  
       openHrs = '[00:00-23:00, 00:00-23:00, 00:00-23:00, 00:00-23:00, 00:00-23:00, 00:00-23:00, 00:00-23:00]';        
       //alert('sObject Name: ' + component.get("v.sObjectName") + '************Record Id: ' + component.get("v.recordId") + '************Hours: ' + openHrs);      
     } else {  
       openHrs = '["' + component.find("mndy1").get("v.value") + '" - "' +  
         component.find("mndy2").get("v.value") + '", "' +  
         component.find("tsdy1").get("v.value") + '" - "' +  
         component.find("tsdy2").get("v.value") + '", "' +  
         component.find("wsdy1").get("v.value") + '" - "' +  
         component.find("wsdy2").get("v.value") + '", "' +  
         component.find("thsdy1").get("v.value") + '" - "' +  
         component.find("thsdy2").get("v.value") + '", "' +  
         component.find("frdy1").get("v.value") + '" - "' +  
         component.find("frdy2").get("v.value") + '", "' +  
         component.find("stdy1").get("v.value") + '" - "' +  
         component.find("stdy2").get("v.value") + '", "' +  
         component.find("sndy1").get("v.value") + '" - "' +  
         component.find("sndy2").get("v.value") + '"]';  
       //alert('sObject Name: ' + component.get("v.sObjectName") + '************Record Id: ' + component.get("v.recordId") + '************Hours: ' + openHrs);      
     }  
     action.setParams({  
       sObjName: component.get("v.sObjectName"),  
       sObjId: component.get("v.recordId"),  
       hrs: openHrs  
     });  
     action.setCallback(this, function(data) {  
       alert(data.getReturnValue());  
       window.location.reload();        
     });  
     $A.enqueueAction(action);  
   }  
 })  
Above "inputVals" function is returning values for inputSelect picklist and "updtHrs" function is first checking to see if 'Open 24x7' is selected to default Hours else concatinating all Hours and finally making a call to our controller method "getUpdtHrs" to query and update current record with Hours

Once we create our Lightning Component using all above steps, we place it on record detail page using Light App Builder. Users should be able to select Hours and once they click save we should see a success message and Hours getting populated on record detail page!











Hope you like this post and any feedback or corrections are always welcome - Thanks!

Comments

Popular posts from this blog

Displaying Toast Message from Modal in Lightning Components

Lightning RecordForm - An enhanced Lightning Data Service

Lightning Component to display dynamic sObject data