I am all about saving my users clicks these days. Developers love APEX for its low code framework. We can be up and running with a pretty great app in hours, and that’s something to celebrate!
But I believe that we need to invest a teeny bit of that time back into our apps and make sure we are giving our users the best experience possible. Whether it’s giving them a Mega Menu, actionable Cards, or visual cues such as Progress Bars, I love giving users more bang for their bucks, or rather, more bang for their clicks.
I use Bootstrap Popovers in many of my apps as a way of extending classic or interactive reports. Rather than forcing a user to click through to a detail page, I’ll serve them the information they are likely to need right there in a hover popover.
It’s really super easy to do, here’s how!
1. JS and CSS files
Don’t worry, we’ve got you covered! Many thanks to Bartosz Ostrowski for providing a Bootstrap CSS file that had only the necessary classes for the popover in his post here.
Download bootstrap.css, bootstrap.js and apex_popover.js here. The apex_popover.js file contains the functions to initialize the popover functionality. I have had these functions for years, and there might be a better way to do this! They allow you to trigger a popover off a span, a, img or button tag.
2. Upload all 3 files to Shared Components
Upload the 3 files you just downloaded to your Shared Components, Static Application Files.
3. Reference the files in your User Attributes
Edit Application Properties –> User Interface –> Desktop
4. Write a query that includes your popover content
Basically, this query lists the departments and counts the employees within each department.
The emp_list column is a ‘<br>’ delimited list of employees in each department.
5. Use the HTML Expression attribute to render your popover
Edit the attributes of the column you want to trigger the popover. Go to HTML attributes and update as follows:
data-title is what displays in the popover title
data-content is the body of the popover, which we defined in our query earlier.
Feel like you want to play with the look and feel? Just launch your Theme Roller, and change up the properties of popover-title and popover-content!
6. Tweak your CSS (optional)
Add a bit of Custom CSS to the inline CSS section of your page, or open up Theme Roller, and pop in some custom CSS for the two classes below.
/* Popover Header */
/* Popover Body */
And that’s all there is to it! Hope you found it useful. Huge thanks to Jorge Rimblas who alerted to me to a potential security flaw in the first iteration of this post.
As always, APEXionately yours,