Record Viewer

by forcedotcom



This Node.js app shows you how easy it is to use the Salesforce User Interface API to create, read, update, and delete Salesforce records.

Salesforce uses User Interface API to build the Salesforce1 and Lightning Experience apps. Not only do you get data and metadata in a single response, but the response matches metadata changes made to the org by Salesforce admins. You don’t have to worry about layouts, picklists, field-level security, or sharing—all you have to do is build an app that users love.

Set Up the App

  1. To authenticate Record Viewer with a Salesforce org, in the org, configure a connected app.
    • For the Callback URL, enter https://localhost:8443/oauth-redirect. If you deploy the app to Heroku, Heroku will provide a different callback URL. Create a new Connected App using the Heroku callback URL.
    • Make a note of the OAuth consumer key to enter on the home page of the Record Viewer app.
  2. To allow the app to make cross-domain requests to Salesforce, in the org, choose Setup > CORS.
    1. Click New.
    2. For Origin URL Pattern, enter https://localhost:8443. If you're deploying to heroku, enter https://* or
  3. Clone the RecordViewer repository.
  4. Set up Docker.
  5. Create the SSL cert and key in the nginx folder. See Set Up SSL.
  6. To build and start the servers, run this Docker Compose command.
    docker-compose build && docker-compose up -d
  7. After Docker finishes building and starts the containers, the web application is available at https://localhost:8443/.

Forward Ports

If you're running docker in a VM, be sure to forward the ports exposed in your containers. This script forwards open ports in the boot2docker-VM.

for i in {49000..49900}; do
    VBoxManage modifyvm "boot2docker-vm" --natpf1 "tcp-port$i,tcp,,$i,,$i";
    VBoxManage modifyvm "boot2docker-vm" --natpf1 "udp-port$i,udp,,$i,,$i";

Set Up SSL

OAuth authentication requires SSL. The server expects SSL key information in the /nginx/ssl.crt and /nginx/ssl.key files in the project directory.

To create a self-signed SSL key:

  1. cd recordviewer/nginx

  2. openssl genrsa -des3 -passout pass:x -out server.pass.key 2048

  3. openssl rsa -passin pass:x -in server.pass.key -out ssl.key

  4. openssl req -new -key ssl.key -out server.csr

    When prompted for a 'challenge password', press return, leaving the password empty.

  5. openssl x509 -req -days 365 -in server.csr -signkey ssl.key -out ssl.crt

For more information, see these Creating a Self-Signed SSL Certificate.

Deploy to Heroku


Deploy to Heroku Using Docker

All of the instructions below assume that you are within the root of the project directory.

  1. Install the Heroku CLI

  2. Log into Heroku through the command line

    heroku login
  3. The Docker add-on must be installed

    heroku plugins:install heroku-docker
  4. The Heroku application must be created

    heroku create
  5. Deploy the application

    heroku docker:release

(Optional) Set the Default Login URL and Consumer Key

After creating the Connected App in Salesforce, follow these steps to set the default Login URL and Consumer Key on the default page.

  1. To set the Login URL, run this command.

    heroku config:set LOGIN_URL={url}

    Substitute {url} with the URL of the server that the org is on.

  2. To set the Consumer Key, run this command.

    heroku config:set CONSUMER_KEY={key}

    Substitute {key} with the value from the Consumer Key field in the Connected App details.

Use the Record Viewer App

To view a record, click a record in the Recent Items list. This list contains recently used items. If you don't see any records, go to your Salesforce org and select a record or two, then return to the Record Viewer app.

When viewing a record, you can click to Edit, Delete, or Clone the record.

To create a record, navigate to the app's home page and select an object from the dropdown. User Interface API supports all custom objects and some standard objects. If you select an unsupported object, the app will let you know.

To see the response from User Interface API that the app uses to build the page, click Show JSON.