Let us try to know about how to get the data from any other 3rd party source (lets say SAP module) to lightning web component (lwc), by making a REST API callout from Salesforce, and display it in a lightning web component (lwc)..
In other words
lets integrate Salesforce with any other system, where salesforce acts as client, while third party system provides the service.
Generally, We can make a callout from Salesforce in 2 ways
- From Client-side controller (from javascript class – ES6)
- From Server-side controller (from Apex class)
After having the required apis and a URL to hit..(lets say we are going to hit URL for retrieving data), if we decide to go for :
Client-Side Callout :
Then don’t forget to white-list the endpoint in Content Security Policies (CSP)

Click Setup —> CSP

Server-Side callout :
Then don’t forget to white-list the endpoint in Remote-Site Settings.
Click Setup —> Remote Site

For the purpose of learning / demo, we need to get the 2nd system with apis. From which we wish to pull out the data.. api dictionary – programmable web contains apis of most commonly known systems / websites / companies..
We will choose moviesDB, for example our motive is, whenever we click on a button in lightning card, it displays the list of movies.. now playing in theaters. SO LETS START…!
- create an account in themoviesdb.org
- click on api tab, and get api key / accesstoken
- Observe the api documentation and lets hit the URL, which displays the list of movies released in India in last 1 month and Now Playing in theatres.
Appropriate endpoint URL, to hit is shown below..
NOTE : While registering for API choose the purpose as EDUCATION, I don’t hold any official licence to use it for testing / learning
https://api.themoviedb.org/3/movie/now_playing?api_key=52121b8ffd37db19123c9f47321e259c&language=te-IN®ion=IN
If sfdx CLI and Visual studio code are installed, Please point your command line to a folder where you wish to create an sfdx project.. execute the below commands one after the other.
cd path/to/your/sfdx/projects
sfdx force:project:create --projectname friday-poster
cd friday-poster
sfdx force:lightning:component:create --type lwc -n fetch -d force-app/main/default/lwc
So, our project Name is friday-poster and component name is fetch
Browse to fetch folder and create a JavaScript file with name movie.js, paste the following code and save it
export default class Movie{
constructor(Id, title, original_language, overview, vote_average, release_date, poster_path) {
this._id = Id;
this._title = title;
this._original_language = original_language;
this._overview = overview;
this._vote_average = vote_average;
this._release_date = release_date;
this._poster_path = "https://image.tmdb.org/t/p/w300"+poster_path;
}
}
Project structure is shown below.

Paste the following code in fetch.js
import { LightningElement,track} from 'lwc';
import Movie from './movie';
export default class Fetch extends LightningElement {
@track movies;
handleCallout(){
fetch('https://api.themoviedb.org/3/movie/now_playing?api_key=52121b8ffd37db19123c9f47321e259c®ion=IN',
{
method : "GET",
headers : {
"Content-Type": "application/json",
"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1MjEyMWI4ZmZkMzdkYjE5MTIzYzlmNDczMjFlMjU5YyIsInN1YiI6IjVjNDc0NWFmMGUwYTI2NDk2NWNhNGFhZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.tdMnNkQfXU__PtQSCyB-XPBJ3FJtIVwlU86LBJHeURU"
}
}).then(function(response) {
return response.json();
})
.then((myJson) =>{
// console.log('%%%%'+JSON.stringify(myJson));
let movies_list = [];
for(let v of Object.values(myJson.results)){
// console.log('%%%%'+JSON.stringify(v.title));
// console.log('$$$$'+v.title);
movies_list.push(new Movie(v.Id, v.title, v.original_language, v.overview, v.vote_average, v.release_date, v.poster_path));
}
// console.log('*****'+JSON.stringify(movies_list));
this.movies = movies_list;
})
.catch(e=>console.log(e));
}
}
fetch.html
<template>
<lightning-card title="Callout" icon-name="standard:product_consumed">
<div class="slds-m-around_medium">
<lightning-button label="get movies playing now" variant="brand" onclick={handleCallout} class="slds-p-vertical_small"></lightning-button>
<!-- hello -->
</div>
<template for:each={movies} for:item="movie">
<c-movie-tile
key={movie._Id}
title={movie._title}
language={movie._original_language}
overview={movie._overview}
vote={movie._vote_average}
release-date={movie._release_date}
poster-path={movie._poster_path}
class="slds-m-around_xx-large"
>
</c-movie-tile>
<br key={movie._Id}/>
</template>
</lightning-card>
</template>
movieTile.html
<template>
<div class="content slds-m-around_x-large">
<img
src={posterPath}
class="slds-align_absolute-center"
alt="movie poster"
/>
<br/>
<div class="slds-m-horizontal_x-small">
<lightning-card >
<div>
<p class="title slds-align_absolute-center">{title}<br/><br/></p>
<p class="slds-align_absolute-center">RELEASE DATE : {releaseDate}</p>
<p class="slds-align_absolute-center">RATING : {vote} / 10 </p>
<p class="slds-align_absolute-center">LANGUAGE : {language}<br/></p>
<div class="slds-m-horizontal_medium">
<p>STORY : {overview}</p>
</div>
</div>
</lightning-card>
</div>
</div>
</template>
movieTile.js
import { LightningElement, api } from 'lwc';
export default class MovieTile extends LightningElement {
@api posterPath;
@api title;
@api releaseDate;
@api vote;
@api language;
@api Id;
@api overview;
}
movieTile.css
.content {
padding: 8px;
background-color: #eaeaea;
border-radius: 0.5rem;
}
.title {
font-weight: bold;
text-transform: uppercase;
}
Now deploy this component.. behavior of component is shown below.

After clicking on get movies button..


I will soon come up with an-other version of this article, in much more Neater and Structurized way with more functionalities added to this lwc..
In this version 2 of this article, i have added parent-to-child composition functionality and movieTile component is iterated.. in fetch component
An Integration is an Integration, whether we do it with a banking database system or movies database. [next version of this article is under construction]
hi srikanth,
Above fetch Code giving error ,
“SyntaxError: Unexpected end of input”
Any idea. Why this error coming .
Thanks
Veera
Hello,
Thank your very much for the article.
I have a question please :
What is the best practice ?
Make callout client-side from Javascript or server-side from APEX ?
I don’t know what it the main difference between the two.
Thank you.
Even with the CSP and the Remote site set, i keep getting this error:
Refused to connect to ‘https://api.themoviedb.org/3/movie/now_playing?api_key=193603fd797bc5351®ion=IN’ because it violates the document’s Content Security Policy.
how can we post input file in lightning component
VG
I have been give a small poc
Build API in Mule and hit it from LWC
no APEX
User should select an Object Name, then pick the fields to be queried/viewed and hit Show
it should bring the top 100 by default unless there are filters user would like to mention
Any idea how?
I am trying to follow the above method of calling external system from javascript, however getting the similar error message: in my case its zendesk API its
Refused to connect to ‘[Link deleted]because it violates the document’s Content Security Policy.
I have the domain added to CORS and also to CSP trusted site, still same error.
The API call works for other apis such as jsonplaceholdier API but for some reason not for zendesk. Thanks