An Org Chart Lightning Component for the Utility Bar in Spring ’17

The upcoming Spring ’17 release has many new and exciting features for developers, and you can get a detailed walkthrough in this post: A Storm of New Lightning Features in Spring ’17. One of my personal favorites is the new App Manager that makes it easy to customize the Utility Bar with Lightning Components. There are already a large number of places where you can customize Lightning Experience by adding Lightning Components including Record Pages, Home Pages, Lightning Actions, and Custom Tabs. So what type of components are the best fit for use in the Utility Bar? Components that you always want at your fingertips, regardless of what you are doing.

To give you an example of a Lightning Component that is a good fit for use with the Utility Bar, I built an Org Chart component that allows you to search for employees, view employee details, and navigate up and down the org chart. You can watch the video below to see the Org Chart component in action in the Utility Bar:

Installation Instructions

Follow the steps below to install the Org Chart component in your org:

Step 1: Prepare your Environment for Lightning Component Development

  1. Sign up for a new Developer Edition
  2. If you are using a New Developer Edition, the Lightning Experience is enabled by default and you can skip this step. If the Lightning Experience is not enabled :
    • In Setup, click Lightning Experience in the left navigation.
    • Scroll down to the bottom of the page and set the Lightning Experience switch to the Enabled position.
  3. Switch to the Lightning Experience if you haven’t already using it (click your name in the upper right corner and click Switch to Lightning Experience).
  4. Enable My Domain:
    • In Setup, type Domain in the Quick Find box and click My Domain.
    • Enter a domain name and click Check Availability. If it’s already taken, try a different name.
    • Click Register Domain.
    • After a few minutes, you’ll receive an email indicating that your domain name is ready. At that point, go back to My Domain, click the Log in button to login to your new domain, and click Deploy to Users.
    • Make sure the process diagram at the top of the screen indicates Step 4: Domain Deployed to Users. The package installation will fail if the your domain is not in the Deployed to Users state.

Step 2: Install the Org Chart Component

  1. Click this link to install the OrgChart unmanaged package in your org, and select Install for All Users. The package adds an ImportOrgChartData Visualforce page and two fields (Picture__c and Include_In_Org_Chart__c) to the Contact object.
  2. In the Developer Console, open the ImportOrgChartData Visualforce page. Click the Preview button, and click the Import Data button. After a few seconds you’ll see a dialog indicating that the data import operation was successful. Click OK.

The sample application works with the Contact object to allow you to load a meaningful number of employees using a Developer Edition (You can’t load as many records in the User object in a Developer Edition). You can easily modify the application queries to work on the User object in a real life environment.

Step 3: Add the Org Chart Component to the Utility Bar

Watch the video below to install the component in the Utility Bar:

Summary

The Utility Bar is yet another way you can customize the Lightning Experience with standard and custom components. The components you add to the Utility Bar are always one click away and provide a great way to keep users focused and productive by allowing them to perform common tasks without having to navigate away from what they are doing. We can’t wait to see the components you will build.

Additional Resources

tagged , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Mohammed Riaz

    Hi Very Good Article
    How we can change it for the Roles and Hierarchy it will be helpful for all developer Community