Salesforce User Interface API
Introduction to User Interface API
To build Lightning Experience, the developers at Salesforce needed a new API because the existing APIs were designed for data integration not for building user interfaces. So, after discussions among themselves, UI API was born.
How UI API is different ?
If you do any changes in the layout in your Salesforce Org, the same changes will reflect in your custom UI automatically and it'll render automatically with the updated layout.
This is a very good and awesome feature of UI API, not only this, your sharing rules, field level security will be automatically handled by UI API itself i.e.
If a particular field is not visible in Salesforce to the user, it'll not be visible to the same user in your custom application using UI API.
Isn't that Amazing..?? But wait not only this, UI API provides you a lot more features listed below:-
- With UI API, you get the record information along with the layout information. That means you don't need to do any query to fetch the records separately in your UI.
- It provides you the data and metadata about the actions provided in the UI like custom buttons, quick actions etc. So that the custom buttons behave in the same way in your custom app to as they work in your salesforce org.
- You can easily perform CRUD operations on records with UI API.
- UI API makes it easier to implement dependent picklists in your custom UI by providing keys to match the records dependent on other records.
Live Demo - Salesforce UI API
- eTag
- layoutUserStates
- layouts
- objectInfos
- records
eTag
This was a main concept of using UI API, the other response values are dynamic according to the request made and the response bodies can be understood by referring to the UI API original salesforce documentation. In our case, we are fetching the record UI whose response is explained in the documentation here. It is pretty simple to understand other response values while fetching record ui apart from eTag:-
- layoutUserStates:- Map of layout IDs to the user state information. Show whether each section in the layout is collapsed or not. Each section has a unique id.
- layouts:- A map of object API names to the layout information of each object. It consists of whole description of the layout along consisting of every single data like which sections are collapsible and which field is present in which row and in which section, the number of columns in each section etc.
- objectInfos:- A map of object API names to each object's metadata. It consists of whole object metadata including:- fields, depend fields, child relationships, record types etc.
- records:- A map of record ids to each record's data. In the record-ui we provide the record id at the end, so the whole data in each and every field of that record will be given in this part. Record data is provided along with the api name of each field so that we can easily synchronize the whole data with the fields available and show in our custom layout.
Moving on to React
- git clone https://github.com/rahulmalhotra/SalesforceUIApi.git
- cd SalesforceUIApi
- npm install
- npm start
P.S.:- I am using a windows system and maybe the commands should be same inside the git bash on mac too but I don't have the right idea. Let me know in comments if there is something different for mac and I'll update this.
So, your react app will run and open in your browser at localhost:3000 port and you'll see something like below:-
Wow..!! Your react app is up and running. If you open the console, you'll see an error saying failed to fetch as the app was not able to connect to your salesforce org and fetch the account layout. To make it simple and to the point, I haven't used any oAuth or anything for authentication, If you move in to the src folder and then to the App.js, you'll see something like given below:-
So, as you can see in the above code snippet, in this.state I have hard-coded the access token and the account Id as I am fetching the account record, for the access token, you need to create a connected app in Salesforce and hit it by postman or any other tool and account Id is simply the id of any account in your org. Then you can see that in the render() I have simply given a heading - Salesforce UI API Demo with React and called ViewAccount component by passing the accountId and accessToken in that as parameters.
Note:- If you don't know how to create a connected app or get the access token via postman let me know in comments and I'll create a separate post for that too.
Now if you see ViewAccount component in the src folder, in the constructor, I have called fetchAccountDataFromUiApi() this method is hitting my salesforce URL by using fetch() and setting up the required info to send like the account Id is concatenated at the end of the URL, request type is GET and headers consists of 'Bearer ' along with the access token concatenated with that, you can change the domain to your own salesforce org domain. In the response, I have extracted the sections and fields from the api where sections are from layouts and fields are from records key of the UI API as we need both. In the render() again I have simply written This is a simple component to view account and then called the layoutSections() which is passing the sections and fields information to LayoutSections component.
In the LayoutSections component, it is extracting the rows from sections and passing the rows and fields to LayoutRows component.Similarly, in the LayoutRows component, it is extracting the fields in each row and mapping it's value by checking the api name with the fields data we have and displaying it in a div.
If you have set the access token, record Id and URL correctly, the final output will be as follows:-
So, as you can see, the Account Information is the section name is there and if I see my account layout in the org, it is as follows:-
As, you can see that in both the layouts, my rows contain data as follows:-
Account Owner -> Phone -> Account Name -> Rating and so on....
Now it's time for magic. Let's edit our account layout in the org so that it's like given below:-
Happy Trailblazing..!!
This comment has been removed by a blog administrator.
ReplyDeletePlease don't spam. I am going to delete this right now
DeleteThank you once again for this wonderful tutorial. Sure a demo on how to create a connected app or get the access token via postman will be very helpful.
ReplyDeleteBookmarked your suggestion Alo. Will write a post on the same for sure :-) Do share this post in your network too.
DeleteHi. Can you help me please. How can we get access token or how we can login via application? I tryied to send a request to login but I got an CORS error.
ReplyDeleteHi Viktorria, usually a CORS error is managed on server side, while calling out we can set a header parameter to allow cors but that doesn't work all the time. So, it depends which is your client and server in case of a request being made.
DeleteHi. Can you help me please? How can we get access token or how can we login via react application. I tryied to send a login request, but I had a CORS error.
ReplyDeleteReplied Above :-)
DeleteHi Rahul,
ReplyDeleteIs it possible to achieve without react js
Yes, you can create an application using any JS framework
Delete