Hi, my name is Ghazwan Khairi. And I'm a systems consultant with Dell. Today I'll be configuring project health dashboard with conditional images, using Quick Apps for SharePoint.
What you're looking is the end result. And I'll walk you through how I configured this to show up like this on the screen. So I'm looking at my project health, and I'm looking at all the projects. And I'm looking at basically displaying conditional images based on the value of a field.
So let's walk through the steps of how we accomplish this. First things first, we need to find the icons that we want to work with. So find your icons. And once you have allocated specifically what icons are going to be represented for your project health, or for any other metric you're trying to kind of dashboard, and present through a visual, then upload these pictures or icons to a picture library. Or in my case, I've actually just put them on an image folder under my site assets document library.
So that's what the script does. Make sure you build that script. Once you're done creating your script, then the next step in the process would be upload your script to somewhere on the site. And in my case, if I go back to my site here, I've uploaded this script to, again, my SiteAssets, I believe.
So if I go to SiteAssets, I should see a DisplaySeverity script. So again, come up with images, copy the URLs, create your script, and you can go back and copy that script as well if you want from this video. And then put this script in the document library, and then let's go to the page where we're going to render this information.
So we'll go to Project Health. And what's going on in Project Health if I go to Edit the Page, there's a couple of things going on. There's a content editor web part. And then there's the actual web part that's showing the values.
So the next step in the process is to configure a content editor web part. What this content editor web part does is it simply calls the script that's on my SiteAssets. I don't want to open it, but notice here the URL just simply goes to the site.
Final step in the process is to configure your main web part that will show this information. So let's go to look at the configuration of the web part. And in the configuration of this web part, what you're going to notice is obviously we have bounded this list to the ticket, sort of the project list, that you want to work with.
And then we configured what fields we want to display on the screen. That's why you're seeing Severity, and Project, and all these fields. But I also went to the bottom of this section, and I clicked on Custom1.
So I configured a custom field. And it's actually right here on top because I gave it a value. So let me show what I did.
I clicked Custom1. I changed the field name to CalcSeverity. The title of this field or this column is nothing. It's just a space. This is what the section is right here. You can call it health if you want to.
And it's set 10 pixels in width. And then all the value of the calculated field is it's basically calling the Severity script. So script display Severity, it's actually calling the name of the script here is DisplaySeverity. So it's calling the DisplaySeverity script, and the field that we're going against is Severity.
Call the script. And then the grid that will show this information, create a calculated field through by clicking on Custom1. And then give it a label, a title, and then from here you're just calling that script and you're saying what fields we're going against.
And now as users log into this page, when they go to their help, in my case to my Project Health dashboard-- if I go back and browse, Project Health-- by default, we're going to know exactly where my projects stand, or where our tickets stand, or who's the technician who's working on this, et cetera. This concludes this video. Thanks for tuning in.