Scribd Logo
Upload

Welcome to Scribd!

  • Salesforce+LWC+Integration+Project+Part+3

    Uploaded by

    Ricardo Diaz Batalla
    2 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views6 pages

    Salesforce+LWC+Integration+Project+Part+3

    Uploaded by

    Ricardo Diaz Batalla

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 6

    Salesforce LWC Integration Project

    LWC Component calling Apex Class method with


    integration
    Steps to be followed:
    1. Check Apex code to get data from API (Anonymous
    Window)
    2. Create new project in VS Code.
    3. Create Apex Class, @AuraEnabled method and add
    above code in it.
    4. Create App Page in Salesforce Org and add it to
    Nav bar of any app (e.g. Sales App).
    5. Create LWC Component.
    6. Add Search Bar, Search Button.
    7. Call Apex Class Method from LWC Component.
    8. Result String should be parsed in JavaScript file.
    Save result in an Array.
    9. Fetch result from an Array in HTML file by using for
    each loop.
    1. Check Apex code to get data from API (Anonymous
    Window)

    Example: IMDB API


    // Create a new HTTP request object
    HttpRequest req = new HttpRequest();
    // Set the endpoint URL of the external service

    req.setEndpoint('https://api.collectapi.com/imdb/imdbSearchByName?
    query=golmaal');
    // Set the HTTP method (GET, POST, etc.)
    req.setMethod('GET');
    // Set any request body if necessary
    // req.setBody('Your request body here');

    // Add any headers needed for the request


    req.setHeader('Authorization', 'apikey
    7wz7vNhq4eqwyYOwK3ulHT:7LDDkJ1luCkLjDAcJ0D5Mv');

    // Create a new HTTP object to send the request


    Http http = new Http();
    try {
    // Send the HTTP request and store the response
    HttpResponse res = http.send(req);

    // Parse and handle the response as needed


    // For example:
    if (res.getStatusCode() == 200) {
    // Successful response
    String responseBody = res.getBody();
    System.debug(responseBody);
    // Process responseBody
    } else {
    // Handle error response
    String errorMessage = 'Error: ' + res.getStatusCode() + ' - ' +
    res.getStatus();
    // Process errorMessage
    }
    } catch (Exception e) {
    // Handle any exceptions that occur during the HTTP request
    System.debug('Exception occurred: ' + e.getMessage());
    }

    2. Create new project in VS Code.

    3. Create Apex Class, @AuraEnabled method and add


    above code in it.

    4. Create App Page in Salesforce Org and add it to Nav


    bar of any app (e.g. Sales App).
    5. Create LWC Component.

    6. Add Search Bar, Search Button.


    For Salesforce predefined components, search on
    Google Lightning Component Library.
    For SLDS predefined css classes, search on Google
    SLDS Utility Classes.

    Padding:
    Padding is said to be the inner space of an
    element, i.e., the padding is the space inside of the
    element's border.
    Margin:
    Margin is said to be the outer space of an element, i.e.,
    the margin is the space outside of the element's
    border.

    7. Call Apex Class Method from LWC Component.

    8. Result String should be parsed in JavaScript file.


    Save result in an Array.
    Example:
    <!DOCTYPE html>
    <html>
    <body>
    <h2>Creating an Object from a JSON String</h2>
    <p id="demo"></p>

    <script>
    let txt = '{"name":"John", "age":31, "city":"New York"}';
    let obj = JSON.parse(txt);
    document.getElementById("demo").innerHTML = obj.name + ", " +
    obj.age;
    </script>

    </body>
    </html>

    9. Fetch result from an Array in HTML file by using for


    each loop.
    <lightning-layout multiple-rows>
    <template for:each={movies} for:item="movie">
    <lightning-layout-item size="3" key={movie.imdbID} class="slds-p-
    around_medium" style="border-style: groove;">
    <img src={movie.Poster} alt="No image found" style="max-height:
    300px; width:90%"/>
    <br>Title: {movie.Title}
    <br>Year: {movie.Year}
    <br>imdbID: {movie.imdbID}
    <br>Type: {movie.Type}
    </lightning-layout-item>
    </template
    </lightning-layout>

    You might also like