Building a Real-Time Train Status Tracker with Salesforce LWC and Apex

 Building a Real-Time Train Status Tracker with Salesforce LWC and Apex

In this tutorial, we'll walk through the process of creating a real-time train running status tracker using Salesforce Lightning Web Components (LWC) and Apex. This tracker will fetch live train data from an external API and display it in Salesforce. Follow along to enhance your Salesforce skills and build a practical application.

Step 1: Setting Up Remote Site Settings

To begin, we need to set up remote site settings in Salesforce to allow external API calls.

1. Navigate to Setup in Salesforce.
2. Search for Remote Site Settings in the Quick Find box.
3. Click New Remote Site.
4. Enter the following details:
   • Remote Site Name: TrainStatusAPI
   • Remote Site URL: https://rappid.in
5. Click Save.

   Step 2: Creating the Apex Class

   Next, we'll create an Apex class to make an API call and fetch train details.<template>

           

       <lightning-card title="Train Info-Running Status" variant="narrow" icon-name="custom:custom36">

               <div class="slds-p-around_small">

                   <lightning-input type="text" required="true" label="Enter Train Number" onchange={handleInputChange}  placeholder="e.g 12312, 12302, 12704, 12321, 12303......"></lightning-input>

               </div>

               <div class="slds-p-around_small slds-p-left_large">

                   <lightning-button label="Get Train Info" variant="Brand" onclick={handleTrainInfo}></lightning-button>

               </div>

   
   

               <template lwc:if = {showSpinner}> 

                   <lightning-spinner alternative-text="Loading"></lightning-spinner>

               </template>

               

               <template lwc:if = {showTrainDetails}>

               <div class="slds-p-left_small">

                       <div class="slds-text-heading_large slds-text-color_success">{trainDetails.train_name}</div>

                       <div class="slds-text-title">{trainDetails.updated_time}</div>

                               <div class="slds-p-top_x-small" style="height: 300px;">

                                   <lightning-datatable

                                       key-field="train_name"

                                       data={trainDetails.data}

                                       columns={columns}

                                       hide-checkbox-column="true">

                                   </lightning-datatable>

                               </div>

               </div>

               </template>

       </lightning-card>

   </template>

Step 3: Creating the LWC Component

We'll now create an LWC to input the train number and display the live status.

import { LightningElement } from 'lwc';

import getTrainDetails from '@salesforce/apex/TrainDetails.getTrainDetails'

const columns = [

    { label: 'Station Name', fieldName: 'station_name' },

    { label: 'Distance', fieldName: 'distance'},

    { label: 'Halt', fieldName: 'halt' },

    { label: 'Delay', fieldName: 'delay' },

    { label: 'Platform', fieldName: 'platform' },

    { label: 'Timing', fieldName: 'timing'},

        

];

export default class TrainDetails extends LightningElement {

        

        inputTrainNo = '';

        showTrainDetails = false;

        showSpinner = false;

        trainDetails = {};

        columns = columns;

        

        handleInputChange(event){

                this.inputTrainNo = event.detail.value;

        }

        

        handleTrainInfo(){

                this.showSpinner = true;

                this.showTrainDetails = false;

                //console.log('inputTrainNo '+this.inputTrainNo);

                getTrainDetails({trainNo : this.inputTrainNo})

                .then((result) => {

                        this.showSpinner = false;

                        this.showTrainDetails = true;

                        this.trainDetails = result;

                        //console.log('trainDetails '+JSON.stringify(this.trainDetails));

                })

                .catch((error) =>{

                        this.showTrainDetails = false;

                        console.log('Some error occurred while fetching train details');

                });

        }

}

Conclusion

By following these steps, you have successfully created a real-time train running

status tracker in Salesforce using Lightning Web Components and Apex.

This project not only demonstrates API integration but also enhances your

skills in building responsive UI components with LWC.

Call to Action

If you found this tutorial helpful, please like, share, and subscribe for more

Salesforce development content. If you have any questions or feedback,

feel free to leave a comment below.

Tags:

#Salesforce #LWC #Apex #TrainStatus #APIIntegration #SalesforceTutorial #LightningWebComponents #RealTimeData