Salesforce Data Dictionary Generator
This tool will help Salesforce Developer/Administrator to visualize their Schema Object fields.
4 min read
Table of contents
- 👋 Introduction
- Tech Stack:
- 📷 Screen Shots
- ⚡️ One-click Deployment to your own Vercel Account
- 🧑🔧 Pre-Work
- 🧑💻 Environment Variables
- 🛑 Security
- ⚡️ Local Machine Installation
A Web-Based tool for generating Salesforce Data Dictionary supported with Oauth2 Salesforce Authentication. This tool will help Salesforce Developer/Administrator to visualize their Schema Object field's pre-selected important attributes rather than visiting Salesforce Object Manager. It can export multiple schema objects to excel with fancy cell color and a Datatable for viewing the selected Schema Object.
Start blogging with Hashnode
- [x] Next.js
- [x] NextAuth.js
- [x] tRPC
- [x] jsforce
- [x] Tailwind
- [x] Typescript
- [x] Flowbite React Components
📷 Screen Shots
Figure 1 - Duel Picklist
Figure 2 - SObject Datatable
Figure 3 - Exported Excel File
⚡️ One-click Deployment to your own Vercel Account
Using the Vercel Deploy Button, you can quickly deploy this project into your own Vercel Account.
After clicking the Deploy button above, it will redirect to your Vercel Account, you'll see similar to the following screenshot bellow.
Vercel will ask you to link your Github, Gitlab, or Bitbucket. In this demo it uses Github, then populate the Repository Name and click Create.
Next, it will proceed on setting up the Environment Variables needed for this project to run smoothly, then click Deploy
Create Connected App in Salesforce
- Log in to Salesforce as an administrator.
- In the drop-down list of the account (in the upper-right corner), select Setup.
- Go to App Setup > Create > Apps in the left-hand pane.
- In the Connected Apps pane, click the New button.
- On the New Connected App page, fill the following required fields under Basic Information:
- Connected App Name. For example, SF-Dictionator Demo.
- API name. For example, SF-Dictionator Demo.
- Contact Email.
Go to API (Enable OAuth Settings), and select Enable OAuth Settings.
- In the Callback URL field, enter
In the Selected OAuth Scopes field, for this demo, I added all available scopes. On your end you can only select Access and manage your data (API), and then click Add.
- In the Callback URL field, enter
Click the Save button to save the new Connected App.
- In the Connected Apps list, find the App that you just created, and then click Manage.
- On the page that opens, click the Edit button.
- Under OAuth policies, select All users may self-authorize in the Permitted Users list, and then click the Save button.
- Go back to the Connected Apps list, and click the App that you just created.
- Go to API (Enable OAuth Settings), and note down the Consumer Key and Consumer Secret, which will be used for the configuration of Environment Variables.
🧑💻 Environment Variables
For local installation, create
.env.local in the root folder of the project.
SALESFORCE_CLIENT_ID=YOUR_CLIENT_KEY SALESFORCE_CLIENT_SECRET=YOUR_SECRET_KEY SALESFORCE_URL_LOGIN=https://login.salesforce.com NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=YOUR_NEXTAUTH_SECRET
To generate NextAuth Secret you can use this app: generate-secret.vercel.app/32
How is your token being used or stored?
On this tool, your token is not stored in any databases. With the use of Next-Auth after the Salesforce Authenticate the user, using JWT provided by the Next-Auth only the token is used, and the session with a maximum TTL of 2 hours.
How can we keep the user still log in after 2 hours straight with the active session?
By using Refresh Rotation Strategy and refresh the token with a 15 minutes buffer time before the expiration of the token.
⚡️ Local Machine Installation
Before firing up the project make sure you already set your Environment Variables.
git clone https://github.com/pelayochristian/sf-dictionator.git cd sf-dictionator npm install
For Development, run the below command.
npm run dev
For running the Production Ready package, run the below command.
npm run build && npm run start
Open localhost:3000 with your browser to see the result.
Excellent! ! ! check the github repository of this project and I hope it helps. If found some issues or bugs don't hesitate to log an issues😉 Thank you! Happy hacking ... 💻
Did you find this article valuable?
Support Christian Pelayo by becoming a sponsor. Any amount is appreciated!