Customizing Dashboards and Summary Reports (Webinar 24)

Hello everyone and welcome to the I Didn't Know clearpoint Could do that webinar series. I'm Kathryn and I'll be your host today. And today we are going to talk about summarizing high level information in custom views and dashboards in clearpoint. A couple of housekeeping items. We will be recording this session and we'll make it available within a week. The webinar will last about 25 minutes with time for questions at the end, so submit your questions to supportlearpointstrategy.com any that we don't cover up at the end will follow via email. Now, on our last installment we covered creating organizational alignment in clearpoint, and I'd highly recommend you check out that recording on the clearpoint Live Vimeo channel, on our blog or in our Support Center Just Search Webinar Today we're focused on Scorecard level summary views and custom dashboards, which are great for putting your most important information on display and in an efficient and awesome way. So 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 into the early holiday present you've all been waiting for. Bootstrap layouts. That's what's on top for today. And as I mentioned earlier, if you have questions, please send them to supportlearpointstrategy.com and we'll get to them at the end. All right, let's dive in. Per usual, 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. And 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. Now, you may hear us refer to these pages today as landing pages as well, but keep in mind that we're talking about summary reports at the scorecard level. And this set of reports found under the Scorecards dropdown in the Scorecard Reports section are a great place to display high level information for when your users are first logging in or taking a look at a scorecard. So like other reports in clearpoint, they can be edited from the Manage Reports page. And 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 Reports. Then I can drag and drop my landing page to the top of this list so that it will be the page I see when I click on my scorecard and I'll click Save. Now that I know which report I'm using as my landing page, let's click the pencil icon to edit that landing page. And when you open this edit window, you're going to see two tabs. We'll come back to some of the options on the Scorecard Layout tab, but for now let's click on the Page Layout tab. And 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 full width at the top and bottom half width in the middle, similar to a detail page. And the fields that you see on this page are all either default or custom fields at the scorecard level, so they can be added, deleted, or dragged and dropped. To rearrange that layout. We can see here that there are currently only a few different options for the fields that you can use, and I'm going to show you where to add more so that you can create the exact reports you need. So we'll cancel out of this window, go over to System Settings, Admin Options, and you guessed it, custom fields, and we're right here on the Scorecards tab when we open our window. So this is where we'll add new fields for our scorecard level pages. And let's click on the plus icon to add a new field. So right off the bat we see we have field type here and what kinds of custom fields are useful for a landing page. You might want to put an image on your landing page, in which case we have the image field, which makes it easy to format an image. Maybe you want to reference a chart from elsewhere in your scorecard with important high level information. That's where our chart reference field comes in handy. Now you also have the ability to reference summary reports from elsewhere in clearpoint so that you can not only display a summary report on your landing page, but also add additional fields to that layout. And that's going to be the data grid field that allows you to reference those other summary reports. Maybe we'll pull our matrix report out onto our landing page today. And lastly, there are a few different ways to add text to a landing page. So you have string and long text which allow you to add plain text without HTML styling to your report. HTML text lets you to go further by giving you access to our HTML editor where you can change text size Color, bold, italics, or even add an image or other link to that text. And HTML with Data takes it one step further by allowing you to reference information across different areas of clearpoint in that custom field that we create. So let's add a couple of these. One is going to be Upward Airlines Info. And our other HTML data field is going to be our custom dashboard. Great. So now we've got a variety of fields added for our scorecard reports. Let's click Save and go back to manage Scorecard reports. To create a new layout. I'll click the Add icon, give this report the name Webinar report and then on the Page Layout tab I'm going to add a variety of our custom fields that we just created. Then I can drag and drop them into place to create the perfect layout. Then I'll click Save and click on the title of the report to be taken to that report page. Now we can fill in our content. So double clicking in this image field here at the top, I'll see that I can drag an image from my files or just click to upload. So we'll put in the most festive version of our logo for the holidays and click Save to add it to our layout here in the upwards Airlines Info would be a great place to display our vision and mission and values. So I'll go ahead and copy and paste that text in. And here we'll add an additional surprise at the end. Now we've got the top of our page covered. Let's move on to our chart reference. So here is going to be a series of dropdowns in this field. I start with the scorecard where my chart is located, select the measure the chart is pulling series from, and then I'll select the chart name list. And when I do this, I'll get a preview of the chart that's going to appear on the page and I'll click Save to see it there in a nice clean format with even a link to the detail page and a status indicator as its header. And lastly comes our matrix report. So our scorecard is selected for us. I'll just select the type of element that the report was created for that I want to display. And then from the last drop down I'll choose its name and click Save. Alright, so this is looking pretty good. And let's add one final touch here by clicking on the Edit icon to edit the report going back to that page Layout tab. And this time we'll use the expandable dropdown next to each pod to remove the pod border and header where it'll clean up our layout a little bit and give it a more cohesive look. When we're done, we'll click save and we'll see that change immediately appear. Now we've got the gray clearpoint background showing through and we've still got a nice box around our vision, mission and values. So this looks beautiful. And you may realize that there is one field that we haven't used yet, our custom Dashboard field. So let's put that field now to some epic use and we'll leave this beautiful report alone. We'll go back to manage scorecard reports to create a new one, and we'll call this our custom bootstrap. Over on the Page Layout tab we're going to pull out our custom Dashboard field and give it a stage to itself. So now that's set up. And as I've alluded to, clearpoint allows you to leverage Bootstrap, which is a responsive front end web design framework that allows you to create custom dashboards like nothing you've ever seen in clearpoint before. One might say that we're pulling clearpoint summary reports up by the bootstraps. No, too much. Let's take a look at an example. So here you can see a full width module and some third of the page modules below, done with a couple of half width columns. And the way that the framework of Bootstrap divides your page is by dividing your layout into rows, each with 12 units that can then be combined into columns. And those columns can actually contain further rows and columns, which you'll see as we build out our own example. So this ability lets you go beyond the full and half width page sections of Clearpoint to organize your information into thirds, quarters, 7, 12, any portions of the page that you want. Now Bootstrap does involve some coding, so we're going to start by sketching out our ideal layout to the extent that we can before getting into that coding, just so we can make it easy to visualize and stay on track. And to do that we'll bring in our trusty friends PowerPoint and Notepad. So starting with PowerPoint, one trick will be to define where our rows and columns are going to be ahead of time before we start adding them to clearpoint. So let's go ahead and add one big module for our logo and a big important chart, keeping in mind that this is going to be our landing page, our high level view at how we're doing as a company. And then maybe over here in the right hand column, I want to display Four charts with supporting roles. Once I have that set up, I'll move on to the next row, where I'll pull from our example there and add three rows, three thirds of the page, even those out a little bit. And what's going to help us even more is to add a bit of placeholder text so that we can remember what we want to put where. So this will be our logo and chart. These four will display charts as well. And then here at the bottom, we'll pull in our vision, mission and values again. Great. Let's make that even clearer by using alternate colors to really draw out where our rows and columns are falling. So at the highest level here, we have two rows. We have one row here at the top and one row here at the bottom. Then within that top row, we have two columns. Our column here over on the left, which we're then going to further divide on the right. Excuse me. And our column over here on the left, down at the bottom, this is pretty obvious. We've got three columns each taking up a third of the page. Now, over in our top right column here, we actually have two rows with two columns each. So let's make that clear as well. Here we have our row divider, and then those two columns within each of our rows. So now we have a better sense of how this layout is broken down. And keeping in mind that each row in Bootstrap, regardless of whether it's contained in a column or existing on its own, is going to have 12 units. Let's break our columns down into units here in PowerPoint as well. So this logo and chart is half the page. That'll be 6 out of 12. These modules down at the bottom will each contain 4 out of 12, as this row is divided in thirds. And this whole column is going to be six units as well. So within those two rows in those columns, we again divide the rows in half. So six and six for each row. Great. So now we have our structure laid out, and this is where we'll move over to Notepad, so we can do all of our coding in Notepad, which will give us a little extra real estate and also allow us to use clearpoint at the same time to pull in codes for charts, images and more. And I'm going to start here with some HTML. So Bootstrap is constructed with HTML, which uses what are called divisions to structure the page. And every division has an open and a closed tag. So these tags contain the word divide. Open tag has two brackets here. And you'll see the close Tag looks the same. With the addition of that forward slash, the content of each div or division is going to go between those two brackets. So what we'll do is to work our way in. We'll start with the row divisions, then add the columns, and then bootstrap is further broken down into the white boxes and colored background boxes that we saw earlier on our diversity example layout. And what bootstrap does for us is to define classes for these divs. And a class can be added to the div open tag to give these content predetermined characteristics. Those predetermined characteristics are going to be the rows, columns, white boxes and colored boxes that we saw. So we'll add that class here for the row. It's going to be class equals quote row, end quote. That one's pretty easy, so we'll just copy and paste it. As you can see, we have two main rows in our layout, so the columns are going to go within these row divisions. So here within our first row we have these two main columns. We'll add our open and close tags for the divs and then we'll add our classes for the columns. And these look a little less straightforward, but we start out with col for column xs, which has to do with responsive sizing, since bootstrap is mobile responsive. And then we define the number of units. So in this case that'll be six. Again, we'll do the same for our second six unit column. So class equals quote call XS6. And you might notice something about this row with two columns, which is that the bigger structure actually mimics the structure of these two rows that are embedded in this six unit column. So the content for that second column is going to go here in the column division. And what we can actually do is to copy and paste that row with two half width columns twice for each of the rows that you see here. So now we have our content for rows and columns taken care of at the top. In our bottom row, let's go ahead and add our three four unit columns. And we'll have div class equals quote col xs4 close that disk. And since we have three of the same columns, we'll go ahead and copy and paste it twice more. As I mentioned, there's one third and final layer, which is those white boxes or widgets, which are the colored boxes that will define the format for our content. And we'll go ahead and add this layer to our column. So each column is going to have an IBOX within it or a widget so the class for that our iboxes are going to be ibox Space content. Close that disk and as we go along we'll go ahead and add our placeholder text to give us a little better idea of what the structure is going to look like. So here we'll add our logo and chart. And again within our smaller columns here we can add div class equals ibox state content. Close that div and within that ibox add our chart. Now here we have the same placeholder four times over. So I'll copy it into each of our columns and then down here at the bottom, let's switch over to widgets. So instead of using that ibox content class, the class will be widget face. And here we'll define the background color. So these color options are listed in our help article that we have on this subject. So not to worry. But for now we'll use yellow BG with BG standing for background. And we'll swap out our placeholder, our vision text, and we can copy and paste that div into our following columns popping in our mission and our values. Great. So now our framework is really getting there. Now while we have notepad open, we can actually leverage clearpoint to get the codes we'll need to complete the job in place of those placeholders that we have there. Now we're done with our trusty friend PowerPoint. So we'll bring Clearpoint over into the left hand side of the screen and I'll double click this field to add our logo image. So I can choose from our image library here to find our Upward Airlines logo. And then going back into the HTML source code, I can grab the image brackets to copy and paste them in where our logo is going to go. And that's great. So for now we'll take that text out and I'll go ahead and start using the With Data portion of our HTML with Data field to add the charts to our content. They'll all come from Upward airline, of course, they'll all come from measures. And once I've selected the particular measure where the chart is located, you'll see I have an incredible number of fields of information that I can pull into this layout. The very top one is going to be my chart. So I'll go ahead and grab the four other charts that I want to use here, which will be revenue expenses. Keep in mind, I'm basing this off of the high level information that I think would be most important for maybe a stakeholder or a manager to see. So the Internal cost per flight. And lastly, we'll take a look at the maintenance cost per hundred thousand miles. Now, there's one final step. When you're using charts with bootstrap, you want to specify a pixel width or pixel height for each chart to make them appear correctly in the layout. You actually have a lot of control over this. So what I'll do is before these two final brackets in my chart code, I'm going to add a space, a vertical bar, and then the height in pixels that I want my chart to have. And I'll do that for all five. Space bar pixels. Space bar pixels. There is some trial and error involved, of course, so if you get stuck, please feel free to reach out to us as you're working on your custom layout. Once I have this code defined, I'll go ahead and paste it into the rest of my bootstrap layout in place of my chart placeholders. This code is allowing clearpoint to reference charts within particular measures, hence why you'll see IDs for both the measure and the chart. Looks like I missed one up there. Now, notice that I've made all four of these charts the same pixel height, since we have that nice grid layout for our top right column. Then lastly, as we did in our other dashboard layout, going to go ahead and add our vision, mission and values just by copying and pasting some text here. And this is finally ready to be debuted in clearpoint. So let's take away all of the text that we had there already, switch back over to HTML, and we can use Control A and Control C to copy all of our text and paste it right into our custom dashboard field. So let's go full width for the big reveal. And this is looking as excellent as Bill and Ted's adventure right now. Now, one more step for the final effect. As we did before, let's go ahead and remove the POD borders and header on the page layout tab of the Edit Report field. When I click Save, that custom structure is really going to shine through. Look how happy Olaf is about it. I hope you're happy with it too. And this is just the tip of the iceberg. The possibilities are pretty endless when it comes to creating these custom dashboards. So if you have any questions at all or run into any issues when you're creating your own, we're here to help. We're happy to help, so please feel free to reach out. And we're reaching the end of our time with you today, so I'd like to leave some time for questions. One that we have here is what happens if I'm using the same field in two different summary reports in the same scorecard? So that's a good question. When you've created a bunch of custom fields, it's a great way to create a standard template to use scorecard after scorecard. But when you're using the same field at the scorecard level within one scorecard in particular, you want to keep in mind that that field is going to have the same content. So if we take a look here at the Managed Scorecards page on the Edit Scorecard tab, you actually have a long list of fields that you've created in your scorecard, and you can see that they already have content in them. So if I were going to go back to the Manage Scorecard Reports page, add a new report, and add my image field, I would see my festive logo once again since I'd already added it to this scorecard. The next question is this is so awesome. There must be something else I don't know about clearpoint. What is it? Well, the simple answer to that is that for more clearpoint magic, you should keep tuning in to the I didn't know clearpoint could do that webinar. But there is one more trick that we didn't get to today with the bootstrap layouts, and that's the ability to use Font awesome icons in tandem with these layouts in clearpoint. So if you want to spruce up your custom layouts or really any other pages, you can take a look at the Font Awesome Image Icon library, which will be posted below the webinar video. You have over 600 icons available, so so whether you're working for a lemonade stand or a cruise ship, or really just planning for happy hour, you have a variety of options for icons you can add to your layout. The obvious choice for us is of course the plane, because we're upward airlines ruling the skies. And if you click on that icon from the library page, you'll see a code here that you can paste right into the HTML side of your clearpoint layout. So double clicking here, I'll go down and add this to our mission text on the HTML side and I can actually add another class. Our hero of the day is our HTML classes. It says FA and here I can add 1x through 5x to make this icon a little bigger or smaller. So I'm going to go ahead and add 4. X to that class so that our plane icon will be relatively large. And here you can see we have a fun plane icon here. To spruce up our mission. So another hidden gem in Clearpoint thought awesome and bootstrapped together. It's a match made in heaven. And that's all we have time for today. So from us at Clearpoint, thank you for joining us on the I didn't know Clearpoint could do that webinar. We hope you have a holiday. Wonderful holiday season. And happy reporting.