Customizing Dashboards and Summary Reports

Webinar 24 in the "I Didn't Know ClearPoint Could Do That!?!" webinar series

Are your scorecard landing pages and dashboards in ClearPoint as awesome as your organization? In this episode of the “I Didn’t Know ClearPoint Could Do That!?!” webinar, we draw attention to important high-level information like never before with a plethora of summary report customizations – including personalized Bootstrap dashboards, a bonus functionality of ClearPoint 10.

Happy reporting!

Webinar 24 Transcript

Introduction

  • Hello everyone and Welcome to the “I didn’t know ClearPoint could do that!?!” webinar series
  • I’m Catherine and I’ll be your host today
  • Today we’re going to talk about summarizing high-level information in custom views and dashboards in ClearPoint
  • HOUSE KEEPING
    • We will be recording this session and will make it available within a week
    • Webinar will last about 25 minutes with time for questions
    • Submit questions to [email protected] (answered at the end)
      • We’ll follow up via email
  • On our last installment, we covered creating organizational alignment in ClearPoint, and I’d highly recommend you check out the recording on the ClearPoint Live Vimeo Channel, on our blog, as well as in our Support Center. Just search webinar.
  • Today, we’re focusing on scorecard-level summary views and custom dashboards, which are important for putting your most important information on display in an efficient, and awesome, way.

 

Agenda

  • We’ll cover some different types of fields that will come in handy for customizing landing pages at the scorecard level
  • And then we’ll jump right in to early holiday present you’ve all been waiting for, bootstrap layouts
  • So that’s what’s on tap for today, and as I mentioned earlier, if you have questions, please send them to [email protected] and we’ll get to them at the end
    • Alright, let’s dive in!
  • We’re flying the friendly skies at upward air, so if for any reason you do not wish to be on this flight to awesome summary reports, now is your time to exit the aircraft.

 

Custom fields for scorecard landing pages (1:39)

  • Here in upward air we actually land right on a custom summary report, so let’s take a look at its structure and where it can be edited.
  • You may hear us refer to these pages as landing pages as well, but keep in mind that we are talking about summary reports at the scorecard level.
    • This set of reports, found under the ‘Scorecards’ dropdown, in the Scorecard Reports section, are a great place to display high level information,
    • And like other reports in ClearPoint they can be edited from the Manage Reports page
    • Now, whichever report is at the top of this list is going to be the landing page that I see when I click on my scorecard. So, to sort my reports,
      • I’m going to click the menu next to the add icon
      • And click on Sort Elements.
      • Then, I can drag and drop the landing page I want to the top of the list, and click save.
    • So now I know which report I’ll use as my landing page, and let’s click on the pencil icon to edit that custom welcome page.
    • When you open this edit window, you’re going to see two tabs. We’ll come back to the options on the Scorecard Layout tab, but for now let’s click on the Page Layout tab.
    • I want to point out here that even though this is a summary report, it does not have the typical grid layout with columns to choose from.
      • Instead, you see four page areas – full width at the top and bottom and half-width in the middle, similar to the layout you would see on a detail page.
      • The fields that you see are all either default or custom fields at the scorecard level, and can be added, deleted, dragged and dropped to change the page layout.
      • So we can see here that there are only a few field options currently, and I’m going to show you where to add more so that you can create the exact reports that you need.
    • Lets exit out of this report and click into system settings > admin options > and hmmm where are we going to go to add our custom fields…. Ah! Custom fields.
    • So we’re right here on the scorecards tab when we open our window, and let’s click on the plus icon to add a new field.
    • So what kinds of custom fields are useful for a landing page?
      • You might want to use the image field, which makes it easy specifically to display an image,
      • Or the chart reference field, to reference a chart in the scorecard and link to the detail page where it is locate.
      • The data grid field it is used to reference a summary report from elsewhere in ClearPoint.
      • If you’re displaying text on your landing page, you have a few options.
        • String and Long Text are plain text fields of different lengths, meaning it’s just text, without HTML styling.
        • HTML text, on the other hand, has our HTML editor where you can change font sizes, colors, add images, or make other style changes to the content. You may have seen these capabilities in default fields like analysis and recommendations already.
        • HTML with data goes one step further by allowing you to reference data from elsewhere in ClearPoint
          • For those of you who were with us for the last webinar, this is what we used to build our custom landing page with links to different scorecards.
        • So let’s add two of the HTML with text fields
      • So, now that we’ve created some custom fields, lets go back to the manage scorecard reports page, and add a new report.
        • We’ll call it our Webinar Report, and let’s add the fields that we’ve created.
      • So, double clicking on the image field here at the top, let’s go ahead and add our most festive logo for the holidays. Then click save,
      • And we can copy and paste our vision, mission and values here, adding any customization we like using the HTML editor – such as text decoration, font size, or font color.
      • Now let’s move down the page to our chart.
        • Clicking on this field you’ll see a series of dropdowns, as you select the measure where your chart can be found in ClearPoint.
        • First the scorecard, then the measure, and when you select the chart name, a preview will appear.
        • Note that when we click save, the header in this field now takes us to the measure detail page!
      • Lastly, we’ll bring in our matrix report, and again the key is in the dropdowns.
      • So, choose your scorecard, choose the type of element with which the report is associated, and then choose the name of the report you want to show.
        • And lastly, click save.
      • Alright, this is looking pretty good! Let’s add one final touch here by clicking on the Edit Icon, and going to the Page Layout tab once again.
        • This time, we’ll click the expandable arrow next to each pod, and remove the borders and headers to give the page a more cohesive look.
        • Let’s click save and see our beautiful result. That looks great!

Bootstrap (9:34)

  • Now, there’s one field that we haven’t used yet….
    • So let’s put that customizations field to some epic use.
    • We’ll go back to manage scorecard reports, and add one more summary report here to use for our custom dashboard.
    • We’ll call this Upward Air dashboard
      • And on the page layout tab, we’ll simply add our custom dashboard field.
    • ClearPoint allows you to leverage bootstrap, a responsive front-end web design framework, to create custom dashboards like nothing you’ve ever seen in ClearPoint before.
      • To pull ClearPoint’s summary reports up by their own bootstrap, one might say…
        • …no? too much?
      • Let’s take a look at an example
      • The framework of bootstrap divides your layout into rows, each with 12 units that can be combined into columns,– which can then contain further rows and columns.
      • This lets you go beyond the full- and half-width sections of ClearPoint to organize your information into thirds, quarters, or other portions of the page (hover mouse over example).
        • You can also include content in both these white boxes and colored boxes.
      • Bootstrap does involve some coding, so we’re going to start by sketching out the layout that you want to make it easier to visualize.
        • To do that, we’ll use PowerPoint and NotePad. If you’re working on a mac, the TextEditor application has the same function.
      • So let’s go to PowerPoint here and use some boxes to sketch out the coolest dashboard ever.
      • Let’s say we’ll put our logo, and a big chart up here covering half the screen, and then let’s divide the other half of the screen into four boxes where we can put more charts.
      • Below that, we’ll add some analysis, measure data, and a mystery box in thirds.

 

Row and column framework (13:05)

  • So another trick will be to define where our rows and columns are going to be ahead of time as well.
    • We’ll do rows in red, columns in green.
  • We’ve got three rows – here, here, and here, and our columns are split along the half, the third, and then each quarter.
    • Then within that righthand column in our first row, we’ve got another two rows, each with two columns.
  • And since our rows each have 12 possible units to combine into columns, let’s go ahead and specify the number of units that go into each column.
    • This is true of a row regardless of whether it is embedded into a column or standing on its own.
    • 6 here, 6 there,
      • Then 6 here and 6 here, because this comprises a row,
      • These too
    • And 4, 4, 4
  • So now that we have some guidance here for our framework, let’s start coding.
  • This is where we’ll move over to notepad. We can do all our coding in notepad, and grab some codes for images and other information from ClearPoint simultaneously
    • To prep the layout in ClearPoint, I’m going to edit the layout, and remove all fields from the page in ClearPoint except our customization field. This will be the base for our whole page.
  • Bootstrap is constructed with HTML, using <div> tags to break the page down into sections, or divisions.
    • Keep in mind that each div has an open tag and close tag, and the content goes in between
  • A class can be added to a div open tag to give the content predetermined characteristics,
    • Which in this case bootstrap has put together for us, in the form of the rows, columns, white boxes and colored boxes.
  • So let’s work our way in. We’ll start with the row divs, then add the columns, then put the content boxes in between.
  • So start with your open div tag, add class=”row” before the closing bracket, then close your row div.
  • We know we’re going to have another row, so let’s just copy and paste that now.

Columns

  • Within the first row, lets add 2 divs for our columns….and add the class.
  • The column class has a couple more components.
    • Col for column
    • Dash
    • Xs, which has to do with responsive sizing, and
    • dash 6, for the number of units we’ve used.
  • We’ll add the same again for our second column of 6.
    • So, now we have a row with 2 half-width columns. This is exactly what we have on a smaller scale embedded in the top-right-hand column of our dashboard.
    • So let’s just copy and paste this two times over – making sure that we put it WITHIN the div for our second column
  • Then, let’s move on to our next row
    • This time, it’ll be three columns, each with four units.
    • So let’s add those three divs
    • And their column classes.

Iboxes/widgets

  • Now there’s one more layer of structure to our layout. Our content will go within iboxes, the white content boxes, or widgets, with the rounded corners and colored backgrounds. Each column will have one or the other in it where we can place content.
    • Unsurprisingly, they’ll be specified with a class – ibox content.
      • Add first ibox to first column.
    • And as we go along here, let’s add our content placeholders to our iboxes.
  • Now, the widget classes also have a background color, which will be specified in the class as well.
    • The color options are specified in our help article on Bootstrap layouts in our support center.
  • For today, we’ll use the class “widget yellow-bg” in our divisions. And these will go in the three columns in our second row.
  • Adding our content placeholders as we go.
  • So now our framework is really getting there.

 

Charts and Logos

  • Now, while we have notepad open, we can leverage ClearPoint to get the codes we’ll need to complete the job
    • We already know we want our logo in there, so let’s grab the code for that image.
    • I’ll use the image icon to choose from my image library,
      • And then I’ll click on the HTML bracket icon to grab the code, copy,
      • And paste it into notepad in place of the logo text.
    • Now let’s go back to the front end, and use the “Data” component of the HTML with Data field to add charts and other information.
      • We start by selecting the Scorecard where the data is located, and then the type of element, and specific element where we’ll find the information.
      • Then, under field, we have a variety of information that we can display.
      • For now, we’ll want 5 charts:
      • For Net profit, revenue, expenses, internal cost per flight, and maintenance cost per 100k miles.
      • And each time, I’m selecting the measure from this scorecard and then finding the chart field.
      • Now, you’ll want to specify a pixel height for each chart to make them appear correctly in Bootstrap, and this will be placed before the closing brackets.
        • We’ll add a vertical bar, space, and the height in pixels to each. (so 275…175…175…175…175.
      • And now we can paste our charts into notepad as well, in place of our chart placeholders.
    • Lastly, let’s add our Vision, Mission, and Values respectively to the widgets in the final row. We’ll fill that text quickly here. And…
    • Let’s copy and paste this into ClearPoint, shall we?
      • Going back to the HTML side, we’ll clear out what’s there
      • Copy from notepad,
      • And paste into this space.
    • Now for the big reveal – let’s click save.
      • Looking as excellent as bill and ted’s adventure right now.
      • Now, when you double click back into the editor on the visual side, you’ll see that the widget content is not really visible here, as the text is white. We can always switch back over to the back end to find the code and make the changes we need.
    • SO there you have it, this is just the tip of the iceberg and the possibilities are pretty endless when it comes to creating custom dashboards.
      • If you have ANY questions at all about creating a custom layout, we are happy to help, so please feel free to reach out!

 

 

We’ve talked about using templates from scorecard to scorecard, but what happens if I am using the same field in two different summary reports in the SAME scorecard?

  • What’s important to keep in mind is that at the scorecard level is that the field content is going to be the same on every report where the field is used.
    • Let’s take our original layout as an example. If i were to add a new report and add the welcome field, you’ll see that the content is the same.
    • I’d have to add another HTML with data field to display different content within that scorecard

 

This is so awesome! There must be something else I don’t know about ClearPoint!! What is it???

  • Well, there is one more trick that we didn’t get to today, and that is the ability to use Font Awesome icons in ClearPoint.
    • If you want to spruce up your custom dashboard even more, you can add any icon from this library to your code.
    • Simply search for the icon you want,
    • Take the code from its page,
    • And paste it into your HTML in ClearPoint.
    • Then you can take advantage of classes again to make it 1-5 times its normal size
    • We’ll save and voila! There you have it.
  • For more ClearPoint magic, you can keep tuning in to the “I Didn’t Know ClearPoint could do that webinar.

 

That’s all we have time for today, so from us at ClearPoint we hope you have a wonderful holiday season, and Happy Reporting!

EXPLORE MORE VIDEOS