public

Creating a simple query and export data tool UI with Mule 4 for Salesforce

The idea behind writing about this application, is to demonstrate how using only Mule 4 and a few HTML resources, we would be able to create a simple tool that

3 months ago

Latest Post What tools do I use as Mulesoft developer by Edgar Moran public

The idea behind writing about this application, is to demonstrate how using only Mule 4 and a few HTML resources, we would be able to create a simple tool that creates a job in salesforce and download a CSV file with all data, not only the actions but giving an user interfase to interact with our application. As always I will try to put some steps to follow:

  1. Generating a new Salesforce developer account.
  2. Creating a connected App in Salesforce to retrieve consumer key and secret.
  3. Creating our Mule 4 application and defining the folder structure.
  4. Setup the salesforce connector to login with salesforce
  5. Monitoring user session (validating user is logged in)
  6. Salesforce actions
  7. Query and pull data.

Generating a new Salesforce developer account.

In order to get a new developer account (if you don't already have one) is going to https://developer.salesforce.com/ and select the "Sign Up" option on the top right corner of the page.

You need to provide a few details to generate your account, then you will receive an email giving you the welcome to Salesforce and a link to open Salesforce.

Creating a connected App in Salesforce to retrieve consumer key and secret.

A connected application in salesforce will allow to generate a new set of credentials to allow people in general using Salesforce authenticating themselves throw OAuth. So in order to create a new connected app, we need to select the gear icon in the right corner of the page and select "Setup"

In the left side you should be able to see a menu and a search bar, where you can filter the items, let's type "apps" and clic on the "App Manager" option.

Then we need to locate the "New Connected App" button in the page in oder to create our application

Once you have open the new screen, it will ask for a few required fields.

Then you can save your connected app and should look something like this:

Creating our Mule 4 application and defining the folder structure

Now, you can create a new brand new application in Mule 4. Our application should contain three main configuration files:

Under the resources folder mainly we will have a web folder and inside another folder with the assets we use to render the portal page, just css and a few javascript files. In the root web folder we need only 2 files:

Let's take a look to the configuration files. Starting with portal.xml. This configuration file will allow to render our page under the web folder, to allow this we need to set a Http Listener and use a "Load Static Resource" connector.

Once we type http://localhost:8081 path in our browser, will redirect the call to show the index.html file

Setup the salesforce connector to login with salesforce

Before to explain the Salesforce operations used, I would like to try to explain how the connector is configured.

As we are going to allow any user to use any Salesforce Org to pull data (as far they have credentials of course). we need to use the Oauth v2.0 operation in the connector, we will provide the next information:

Consumer Key: Consumer_key_from_the_connected_app

Consumer Secret: Consumer_secret_from_the_connected_app

Authorization URL: https://login.salesforce.com/services/oauth2/authorize

Access Token URL: https://login.salesforce.com/services/oauth2/token

Resource Owner Id: salesforceQueryTool (here we can dynamically set a value from an external system just like LDAP or active directory to know what user is logged in or needs to execute the login process.)

Listener Config

Host: localhost

Protocol: HTTP Port: 8081

Callback path: /callback Authorize path: /authorize

External Callback URL: http://localhost:8081/dataloader.html

This configuration will allow to start the "Dance" to authenticate the user, so the flow would be:

  1. User get's into the index.html page.
  2. User clics the login link
  3. User is redirected to Salesforce to type credentials
  4. Salesforce redirects back to Mule pointing to the "dataloader.html" page (user is already logged in!)

The index.html page

This page will render the "Home" page of our application,

The "Login" link basically calls a link (/authorize?resourceOwnerId=salesforceQueryTool). in this case we are telling the Salesforce connector to start the authorization process with Salesforce for the salesforceQueryTool resource owner.

After type the credentials, and successfully is logged in in Salesforce it will redirect to the "dataloader.html" page

Also in this case if user is already logged in and goes to the main page, there's a function in JQuery that will retrieve the user information and will automatically redirect to the dataloader.html page, otherwise should login again.

The dataloader.html page

This page is mostly on charge of running the main feature for this app. this page connects the UI to the flows listed in the salesforce.xml configuration files and allow visually see what's happening with the query we provided.

in this example, we need to provide a valid query to generate a new query job in salesforce. The idea is to be able to see the job status and once a job is completed be able to download the file in CSV format.

The actions get triggered using JQuery and making some request to the internal endpoints located in the salesforce.xml configuration file, this way we are able to send requests and get the responses and show in the UI any information we need.

Salesforce actions

Every time theres a request from the pages, the Salesforce.xml configuration file is the main file that contains all operation we need to execute agains Salesforce.

Basically this is the flow we need to follow to use this operations:

  1. Create Query Job: We need to tell Salesforce that we need to create an empty job and that job will be a query to an specific SObject (in this case we are going to set Account object even we can pass dynamically the value).

Create batch for query: We pass the job info and the actual SOQL query we want to pull the data.

Batch Info List: We will monitor the batches generated in Salesforce

Batch result stream and query result stream: Allows to retrieve the actual files from the job.

Query and pull data

So the fun part happens in the dataloader.html page, we just need to write a valid query. in this case we can do "Select Id,Name from Account" then we can monitor the job status and finally when completed we can download the file, here an small animation demonstrating the behavior

The code is available in this Github repository , Hope you find this useful.

Edgar Moran

Published 3 months ago

Comments?

Leave us your opinion.