ClearPoint Cool 2.0

We're back at it with more ClearPoint Cool to fuel your reports. 

On this episode of the “I Didn’t Know ClearPoint Could Do That!?!” webinar series, join us as we explore two sleek and useful layouts.

First, learn how to use chart customizations to create a survey results dashboard. Then, take a deep dive into the HTML with Data field type to pull together a custom, clickable executive summary dashboard of key goals and metrics.

Happy Reporting!

Webinar 39 – ClearPoint Cool 2.0

Introduction

  • Hello everyone and welcome to the “I didn’t know ClearPoint could do that!?!” webinar series
  • Today, we’re discussing even more ways to be ClearPoint Cool.
  • Before we define that for you, here are your smiling hosts, I’m Catherine.
    • Abby: And I’m Abby.
  • A few housekeeping announcements:
    • 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)
  • Any that we don’t get to we’ll follow up with over email.
  • On our last installment, we introduced our first set of ClearPoint cool reports – a gauge dashboard for organization wide comparisons, and a sleek layout for tracking business plan information. I’d highly recommend checking out that recording for more tips and tricks – you can find it on our blog, support center, and vimeo channel. Just search ‘Webinar’.

Agenda (0:53)

  • Now today, we are getting ClearPoint Cool-er than ever.
  • While this is a follow up to our first ClearPoint cool webinar a few weeks ago, it’s not like those movie sequels where the second one is never as good. We’ve got a lot of fresh new information coming at you today.
  • First, we’ll talk through standardized ways to display information from a satisfaction survey, complete with custom charts to boot,
  • And second, we’ll walk through a customized executive summary dashboard, built using HTML with Data fields.
  • Abby: So again, send any questions to [email protected]
    • And bonus points if you can also send us your favorite movie series – especially where a sequel was as good or better than the first one.
    • There’s some heavy rain coming towards the Mid-Atlantic this week, and what better way to spend some quality time in the great indoors than with a few movies?
  • Catherine: So let’s dive in! We are strolling the friendly streets of metropolis today.

Citizen Satisfaction Survey Dashboard (1:47)

  • Abby: The first thing we want to set up is our citizen satisfaction dashboard.
  • Let me show you a quick preview of what that’s going to look like, so you’ll have it in mind as we go through each step.
  • This is Metropolis’ Citizen Satisfaction Survey Dashboard, where the city tracks all its metrics related to Citizen Satisfaction.
  • Whether your organization is a government organization or not, chances are you collect some feedback at some point during the month, quarter, or year – and that many of the questions you ask have similar formats.
  • So, we can see here that the same three different charts have been standardized across each of our satisfaction metrics.
  • Let’s look at a metric near and dear to my own heart – Overall satisfaction with the quality and quantity of books in the library collection. If we look at the first chart, we can see it represents overall satisfaction as a percentage over time.
    • In order to find our ‘Actual’ value, we’ve combined the percentages of responses that were ‘Satisfied’ or ‘Very Satisfied’
  • Catherine: Okay, so it sounds like these questions were constructed on a 5-point scale. But what if you want to show the responses you received, all the way from very satisfied to very dissatisfied?
  • Abby: Great question! We can see a great representation of how those typical survey responses might be charted across time and represented visually in this second chart.
    • It shows the percentages of respondents that chose each answer as stacked bars. This way, we can make sure that we keep the ‘Very Dissatisfieds’ to a minimum, too.
  • Then the third chart here lets us compare how many of each type of response we received in this year’s survey vs. last year’s.
  • We can see that the narrower bars in front represent the percentage value for this year, while the wider columns in the back represent the percentage for the same response in the previous year.
  • In combination, these three charts show how satisfied citizens feel with the books the library offers. So how might we build these same chart types ourselves?
  • Let‘s click into a measure that doesn’t have any charts set up yet, overall satisfaction with the quality of the city’s website.
  • We’ve already got our series added here: our five responses for the current year, and then calculated series where we can record the previous year’s percentages side by side with the current year.
  • But we still need to set up a couple of series calculations.

 

Series calculation – sum (4:08)

  • First we’ll set up the calculation for Actual. So as we mentioned, the actual satisfaction rate will be the sum of the percentage of people who are satisfied and those who are very satisfied. To set that up, we’ll click to edit the series and then click into the calculation tab.
    • We’ll first add the value for the Very Satisfied > Current Period by clicking Insert. Then, we’ll do the same for the Satisfied > Current Period value.

 

Series evaluation (4:40)

  • We’ll also set up an evaluation for Actual.
  • We want the measure to evaluate to on target when actual is greater than equal to target, “caution” when actual is greater than or equal to 80% of target, and below plan otherwise. When there’s no data available, it should default to No Information. Then, let’s Save.
    • We can see the numbers showing up now in the data table!
    • And to see the terms of the evaluation reflected here, we need to go to the Edit Measure Window > Series tab, then select the Actual evaluation for the measure overall, under Evaluation Option.

 

Series calculation – previous year (5:21)

  • Next, we want to show how to set up the calculation for the previous year VS series. We’ve already set the calculations up for the other previous year series to save time.
    • Catherine: Abby, remind me why we need to set up these series again? I mean, in our data table we had data back to 2016.
    • Abby: I see your point – but in order to chart the current year and previous year on the same period in our charts, we’re going to want to have the two values side by side.
    • Catherine: Ok, so those values are going to appear in the same period. That makes sense!
  • To recreate this calculation in the Previous Year VS series, we’ll click to edit the series and then into the calculation tab, we’ll simply select VS as the series in the calculation wizard and set the aggregation to Previous Year, then insert the calculation.
  • Now we can see that the previous year VS values are automatically being calculated and also that our evaluation is running. Looks like we’re in caution status this period.
  • Now let’s get those three charts set up.

 

Line/area chart (6:26)

  • Let’s start with the line/area chart, which I think has the most straightforward set-up of these three. I’ll call this first chart “Overall Satisfaction” and keep the chart type as #2 bar with target lines.
  • Then I’ll click into chart series to set the Actual series to area rather than bar. So I’ll change the shape here to Area, marker to none, and then paste in the hex code for the light sea blue color we saw earlier in the chart.
  • Now if we refresh preview, we’ll see that we’ve recreated the first chart.

 

Stacked bar chart (7:25)

  • Next we’ll add the prior year vs. current year chart. This chart type is stacked bar.
  • Now I’ll click into series and select all five series and paste in the hex codes of these pretty bright colors from blue to light blue, yellow, orange and red.
  • Catherine: Right, so, we have our color picker here for a preset selection of colors, or you can do what Abby’s doing, which is to paste in hex codes for the colors that match your organizational branding.
  • Abby: Now if we refresh preview, we’ll see all those bright colored series set up.

 

Popsicle chart with custom JSON (9:04)

  • The last chart is the satisfaction breakout trend chart.
  • This is a custom chart type that we’ve created using custom JSON, which we will make available as a txt file along with the webinar after the call.
  • But for now let’s take a look at how to set up the chart periods and series using the chart editor.
  • We’ll click into the chart periods tab and make sure that periods to display is set to “Current Period.”
  • Then, in the chart series tab, we’ll need to order these as we’d like them to appear from left to right, with each previous year series being listed after its current year series.
  • Listing the previous year series after the current year will ensure that the current year series is pulled out in front of the wider bar for the previous year series.
  • The rest of the chart formatting will be dictated by the custom JSON. If we click into the “Custom Chart Format JSON” tab and paste in our custom JSON,
  • we can take a quick look at the formatting that makes the unique appearance of this chart possible.
  •  If we scroll down to the series part of the code here, we can see a property called “pointPadding”. This is the property that determines the width of the current year vs. previous year series.
  • We also have this property called “pointPlacement”, which separates the groupings at equal widths on the chart.
  • Now if we refresh preview we can see that point placement spacing at work.
  • Catherine: Again, we’ll make this custom JSON available as a text file along with the webinar so you can take a closer look at this formatting—and use it yourselves!

 

Add custom chart type (11:38)

  • Abby: You can also take that custom JSON we’ll send over and add it as a preset by clicking Add Custom Chart Type.
  • We’ll keep the name of that custom chart type set to “Satisfaction Breakout Trend.”
  • Now when you navigate to a measure and edit a chart, you’ll see this new custom chart style as a chart option in the Chart Type dropdown.

 

Dashboard summary report (12:00)

  • Now since we’ve already got a few more of these measures set up, let’s create a dashboard summary report. We can click into Measures > manage measure reports and click the plus sign to add a new report.
  • We’ll call this Citizen Satisfaction Dashboard and set the report type to dashboard large. Finally we can save and go view the report.
  • And if we click onto the third page we can see the charts we just added.
  • Catherine: Looking good!

 

Scorecard home page (12:39)

  • We can also set this report as our scorecard homepage by clicking into Scorecards > Manage Scorecard Reports and clicking the plus sign to add a new scorecard report.
  • We can call the report “Citizen Survey Satisfaction Dashboard” and then set the layout reference to “Citizen Satisfaction Dashboard.”
  • So if we sort these scorecard reports and put this new report first in the order of scorecard reports, this will now be the home page for the scorecard.

 

Executive Summary Report (13:13)

  • Catherine: Awesome – so, not only is this a good way to standardize Citizen Satisfaction Survey data, but you can leverage these formats for other surveys, or other datasets where the metrics are structured similarly.
  • Now, let’s switch gears and talk about another scenario in which you might be looking to compile different types of information.
  • And that is for an executive summary view. Now, no matter what stage you’re at with performance management and how well you’ve defined your process,
    • Chances are you’re going to meet with your leadership to give them updates and make sure that you’re headed in the right direction.
  • But of course, they are busy and their time is pulled in lots of different directions, so the best kind of report will both pull together the most important data – and make it easy to elaborate on successes and pain points when necessary.
  • So, let’s go into our Metropolis Scorecard – and here’s a quick sneak preview of the format we are going to create today.
  • We’ve done a bit of customization so that we can stay with our city brand here,
    • And then we’ve separated our information by Objective.
    • Underneath the objective name and status, we have our indicators – each with the target value, previous period value, and current period value for comparison.
    • Then below our measure data, we’ve got the objective analysis and plan for further action.
  • And there’s two perks you might not notice right off the bat –
    • If we double click into the data, we can see it’s all being referenced from elsewhere in ClearPoint.
      • That’s right, no double data entry here. Our HTML Tokens are all we need to gather the information other users have already entered.
    • Then second, any of these items that are blue are actually clickable – so we could drill down into our Safe & Prepared Community objective to see more information about why we fell off target.
  • So, now that you’ve caught a glimpse of the end result, let’s get to building this page.
  • All this content actually falls into a custom HTML with Data field, which lets us style our text and tables, and reference information from elsewhere in ClearPoint.

Add custom field (15:40)

  • So, we’ll want to add our custom field.
  • To do that, let’s click over to System Settings > Admin Options. Here in our standard features, let’s click on Custom Fields.
    • And since this is a high level report we’re creating, we’re going to add our field at the scorecard level.
    • So we’re already on the scorecard tab, let’s click the add icon.
    • And we’ll call our custom field Executive Summary. Then, let’s save.

Create custom scorecard report (16:22)

  • So now that we’ve got our field, we want to go set up a report where we can display it.
  • So we’ll put this report in our Metropolis scorecard.
    • And once we navigate to the Metropolis scorecard, I’m going to go to Manage Scorecard Reports, in the Scorecard menu.
    • We’ll click the plus icon to add a Scorecard Report.
  • We’ll call this our Metropolis Citywide Scorecard Executive Summary.
    • And a Standard Report is fine here – we’re going to go over to the Page Layout tab, and on this tab, we’ll add the field we just created.
    • And we want it to be full width.
    • So, once this is in place, let’s save… and go to the report.
  • This field is going to be our canvas today. Do you smell that? It’s the smell of possibilities.

 

Using the HTML editor (17:10)

  • We’re going to double click into the field to get started with our changes.
    • And, we’re going to be using both our HTML editor here to style our text.
    • And HTML Tokens, using this menu here at the bottom.
  • Now first, let’s get a little bit of our introductory information in at the top here.
    • And I mentioned that we want to put some organizational branding in there.
    • So I’ll click in our editor bar to upload an image, upload, and we’ll find our metropolis logo, and insert.
      • Then, I can just resize it by clicking and dragging.
    • Now below that, maybe we want to have some header text. I’m going to first alert everyone that this is our Citywide Scorecard (in case we wanted to replicate this view for our departments, too),
    • Then on a new line, let them know this report focuses on the Citizen perspective of our scorecard. This part just depends on how much information you review at once: Strategic Perspective: Citizens.
    • And on the third line, we can put some high level information about the review period, so there’s no confusion about how recent the data is: Performance summary for February 2018.
    • Then, lets add a bit more context (full space) with a little paragraph of text. We’ve already got this written out, so I’m just going to paste it in.
  • And let’s format the text here.
    • So, let’s go ahead and style what we have at the top – we’ll put our title in bold, a larger font, and a blue that complements our metropolis logo.
    • Then the second and third line we’ll also make a bit larger and put those in bold.
  • So below our intro is where we’ll start adding our objectives and measures. We’ll just set up one to make sure we have a kind of template in place, and then we can copy and paste to replicate.
  • Let’s just type in some placeholders first, and replace them later with our tokens.
  • We want to have our objective name and status here at the top, so let’s type that: Objective name and status.

 

HTML Tables (20:02)

  • Then, on the next line (enter) our measures are actually going to be laid out in an HTML table. We can insert this right from our edit bar. (click table icon). And when we click insert, we can see we’ve got three columns and two rows here.
  • But we know that we want to have our measures here on the left, and then three rows for our data.
    • So we can add an extra row by going back into the table icon, and clicking insert row left. This will insert a row to the left of wherever we had our cursor.
  • Now, if we had more than one measure to list, we could always use our edit bar to add another row, too: by clicking “Insert row below”.
  • And so in these rows, let’s put some placeholders.
    • First, our headers, in bold:
    • Indicators, Target, Previous Period Value, and Current Period Value.
    • Then, for each row, we’ll want our “measure name and status”, and then in each of the data columns, our “series name” and “series status”.
  • Now, one more thing for our complete objective set of data – below our table, we want objective analysis and recommendations. So we’re going to put in bold: “Analysis:” and “Recommendations:”, and we’ll have the data entered after these titles.
  • Now, lets go ahead and add our divider between that top section and our objective data set.

 

Formatting HTML Tables (22:12)

  • And once we’ve got that in place, I do want to just briefly show you a couple of common ways to edit HTML tables.
  • And for that, we’re going to pop over to our HTML side by clicking the bracket icon in our edit bar.
  • So, first – let’s deal with those column widths. We really don’t need them all to be equal, since chances are the measure names are going to be longer than the data values in all instances.
  • Now, let’s use ctrl+F – our trusty browser tool – to find our table. We’ll type table.
  • With just a few line breaks, we’ll organize a bit.
  • We’ve first got this table tag – then wherever we see tr, that stands for table row. And where we see td, those are table cells.
    • In the table tag, we can see the table is set to 100%, so that it aligns well to any screen size.
    • And that’s going to allow us to set the relative widths of the columns as well.
    • So in the first column, let’s find the first td tag. Here we’ll put width=”70%”. That’s going to stretch out our column that contains the measure names.
    • And in the last three columns, we want these to compose 30% total, so each one will contain width=”10%”.
    • Let’s take a look back at what we’ve done so far by clicking the bracket icon again. So we can see we’ve stretched out the first part of our table, and equalized the last three columns.
  • Now, to save some time, I’ve put the rest of the styling for this particular report into a txt file, which will be available for you to download with the webinar recording. So we’ll copy that,
    • And go back to the HTML here, and highlight over what we’ve entered – from the hr – or divider, which stands for horizontal rule, to the end of the table, analysis, and recommendations.
    • We’ll paste in the code, and save.
  • Alright, we’re coming along well here! We can see we’ve got everything cleaned up, evened out, and we’ve got a nice grey header and border on our table over here.

 

HTML Tokens (25:10)

  • But we still need to add our tokens – that is, reference the information we need.
  • So we’ll want to click on the Insert HTML Token Arrow to expand this menu.
    • Now, where we’ve got our “objective name and status” placeholder, this is all actually going to be one powerful token – it’s going to be a link to the detail page too.
    • So our first token dropdown will just indicate that we’re pulling from the Metropolis scorecard.
    • Next, we’ll choose objective as our token type,
      • then in the third dropdown, select our first citizen-related objective from the third dropdown – Safe & Prepared Community.
    • In the fourth dropdown, we’re going to type to filter for Status.
      • The Status token is the one that consolidates a name and status icon into one clickable token.
    • Now we’re ready to insert our token. So this is where our placeholders are going to come in really handy.
    • Let’s highlight over our placeholder here, and click insert. Our token goes in right where we want it!
    • Now, this token format might look unfamiliar now, but when we save, it’ll read in plain English, I promise.
      • Right now, we can see it’s showing us the field we entered, as well as the ID number for the element in question.
    • And we’re going to use a similar token for our measures – so in the menus, we’ll swap Objectives for Measures, and choose our measure that is linked to this objective, and use the Link field to insert a link.
      • And we’ll select our Crimes per 1000 Citizens measure.
      • The Link token is similar to the Status token, but without the status indicator – we’re going to put the status icons over with the series in this example.
    • Let’s build out the rest of our data, though, before we save.
    • So this time, we’re selecting series data. Our Token Type is going to be a series, and we can select these from our measures.
    • We’ve got the Target series for our first measure, and then we’re going to choose from the Value or the Status indicator. We actually want both in our table cell, so we can insert one after the other – as long as we place the cursor in the right place.
    • Now, when we’ve got this table completed, let’s click save. Awesome! So this is going to give us a complete view into the measures contributing to this objective.
    • And now that we’ve got everything in place, we can actually copy and paste what we want to repeat, swapping out objectives and measures as we go.
      • I just go back into the HTML, grab everything from the horizontal rule to the end of the table, and paste again for as many objectives as we want to show.
      • Now, to complete the report buildout, we’d want to swap in the correct tokens as well, but for now, we’ll click save.
    • You’ve got a complete summary of the data you need to track this area of your strategic plan – and it automatically populates from the other areas where data has been entered.

 

Now, we’re reaching the end of our time here today, and we want to make sure to leave time for your questions as well.

Questions (29:45)

  • What if I want to export my executive summary report?
    • Catherine: Now this report can be executed like any other by clicking in next to the edit icon and clicking export to PDF. So maybe we want to export this in portrait mode and we’ve got our page size options there as well.
    • If you are concerned about page breaks, especially when these reports get longer—if I jump back to our example here you can see this might not all fit on one page—you can always use more than one field to break down your report.
    • So if I take a look on page layout, not only do I have this page setup here available but I also have the option to add page. So were I to add additional information to the bottom, this would show up streamlined in ClearPoint so that when you export you have a nice page break there so you control what information falls where.
    • In the meantime, if we take a look at our report, we can see all the formatting we’ve set up from our table header to our Metropolis city logo.

Alright, that is all we have time for today. Thank you so much for joining us on the “I Didn’t Know ClearPoint Could Do That?!” Webinar series. We hope to see you next time, and happy reporting!

EXPLORE MORE VIDEOS