When working with a large organization, you get to a point where you have so many objects and so many fields that it can be almost impossible to keep track of them all. It can be very time consuming to dig through the setup menus to find field and relationship names. To help combat this you can use JSforce and Angular to write a single page app to quickly visualize all of your objects and the information about them.

Metadata API

The Metadata API can be a very powerful tool that can be used to describe lots of information about your organization’s objects. As great as the Metadata API is, it can be a very daunting thing to a new developer interacting with the platform. This is why I chose to use JSforce’s implementation of the Metadata API. Not only can you easily use it from inside of VisualForce with Javascript, but you can also use it with node.js, Canvas or my personal favorite way, the command line.

A Tour

Object List

All of your objects are listed and quickly filterable.

Object Description

After selecting an object from the side nav bar you can see lots of information about the object.

Object Fields

All of the fields, their API name, type, and description are also displayed, and are filterable and sortable.

Object Relationships

All of the related objects are also listed, including the elusive relationship name.

How to Install it

Option 1: Multipage

1. Create a new VisualForce page called objDescMainTmpl with this content.
2. Create another VisualForce page called objDesc with this content.
3. Visit the objDesc VisualForce page to use it.

Option 2: Single page

1. Create a new VisualForce page called objDesc with this content.
2. Visit the objDesc VisualForce page to use it.

If you plan on expanding this app, the multipage will make editing the layout much easier.

How it Works

This app is quite simple and JSforce does most of the heavy lifting for us, and Angular does the rest.

Here we setup our JSforce connection with the Session_Id of the current user.

This code sets up our templates and routing information. So if we update the hash to be #/Case, we will load the object description HTML and then activate our ObjectDetailCtrl method to fetch the rest of the data.

When the app starts with no parameters, we start by just loading the list of objects. This sets our $scope.loading_sidebar variable to true so we can show the loading animation. Then we get a description of all of the sObjects from the describeGlobal method of JSforce. This then gets set on our $scope.objects for us to use in the sidebar HTML.

In our sidebar HTML we set the ui-sref attribute, which will update our route when clicked.

The code is called when we have an object and want to get its information. The describe method of JSforce returns all of the metadata for the requested object (stored in $stateParams.name). This then gets stored as $scope.current_object for us to use in the display.

Conclusion

This app shows how you can display lots of important data about your organization’s metadata with very little effort. With the framework setup here, the sky is the limit since you have almost full access to almost all of the APIs that the Salesforce Platform offers.

For more information: JSforce Documentation

About the Author

Patrick is a full-time Salesforce developer at Red Hat.  He spends most of his spare time developing open source software and helping in the community.