Random Biriyani Image Generator LWC - Add Some Flavor to Your Salesforce Org | Khumed SFDC"

Random Biriyani Image Generator LWC component!

This blog post is about the  of the Random Biriyani Image Generator, with this lightning web component we can generate the Random Biriyani Image.

URL for generating Image : https://biriyani.anoram.com/get'

APEX CODE

public without sharing class getBiriyaniImages {

    @AuraEnabled (cacheable=true)

    public static string getBiriyaniImagesonButtonclick() {

        Http http = new Http();

        HttpRequest request = new HttpRequest();

        request.setEndpoint('https://biriyani.anoram.com/get');

        request.setMethod('GET');

        HttpResponse response = http.send(request);

        return response.getBody();

    }

}

HTML CODE

<template>

    <lightning-card title = "Random Biryani Image">

        <template if:true={loaded}>

            <div class="container">

                <h1>Random Biryani Image Generator</h1>

                <img src={biriyaniImage}

                     alt="Random biryani image"

                     height="300"

                     width="400">

                <lightning-button label="Generate"

                                  variant="brand"

                                  onclick={handleButtonClick}>

                </lightning-button>

               

            </div>

        </template>

        <template if:false={loaded}>

            <div class="container">

                <lightning-spinner alternative-text="Loading... Please wait"

                                   variant="brand">

                </lightning-spinner><br/><br/>

                <h1><b>Loading...Biriyani Please wait</b></h1>

                <img src={biriyaniImage} height="300" width="400">

            </div>

        </template>

    </lightning-card>

</template>

JS CODE

import { LightningElement,wire } from 'lwc';

import { refreshApex } from '@salesforce/apex';

import getBiriyaniImagesonButtonclick from '@salesforce/apex/getBiriyaniImages.getBiriyaniImagesonButtonclick';

export default class BiriyaniimageGenrator extends LightningElement {

    biriyaniImage;

    wiredResult;

    loaded = false;

    @wire(getBiriyaniImagesonButtonclick)

    wiredBiriyaniImagesonButtonClick(result) {

        this.wiredResult = result;

        if (result.data) {

            this.biriyaniImage = JSON.parse(result.data).image;

            this.loaded = !this.loaded;

        }

    }

    handleButtonClick() {

        this.loaded = !this.loaded;

        return refreshApex(this.wiredResult);

    }

}

   

META-XML FILE

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>56.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__Tab</target>

        <target>lightningCommunity__Default</target>

    </targets>

</LightningComponentBundle>

Like our post & bookmark this blog for your future learning. 

Any suggestions and improvements are most welcome, please comment your suggestions and improvement in the comment box. 

Happy Coding Sharing Is caring. 😀😀😀

YoueTube Link : Admin Learning video: https://youtu.be/MJtNJN9eShM

Internal Link: Salesforce Development ServicesSalesforce Lightning Web Component External Link: Biriyani Recipes