Skip to main content

IT Service Management: Want Customer Charts on Your Portal?

Ever come across a customer that asked to see data based on tickets they have submitted? OF COURSE! You give them an entity list of records that shows open, closed and maybe all the tickets they have submitted. But they want more (they always do right?). Using Provance ITSM for Dynamics 365 can make this requirement very simple. Using the power of the Dynamics 365 platform, we have built an ITSM portal to get you a front-end that is flexible and configurable to meet your customer’s needs.

But, how do I get charts on my ITSM Portal you ask? Simply use Liquid templates to render the charts you build in Dynamics 365. Liquid templates are a very powerful resource that can present data differently. You can find out more about Liquid templates here.

Let’s get started.

I have created some basic charts in Provance ITSM off the ticket entity. Why you may ask? When an ITSM record (i.e. Incident, Service Request, Change or a Problem) we create a related ticket to simplify how we can report across our service operation from a single data point.

These are charts to visualize active tickets that an end user may want to see. First thing I like to do is preview what I want to display to the end user in a personal dashboard so I can plan what I need to generate for the Liquid.

So, what do I need? Well, I will need the Chart and view GUIDS for the Liquid and I will also need to create an entity list. To learn how to create entity list find that here.

I have created my entity list to use the view Active Tickets and enabled a button to search as well as create a ticket from the list if need be. BUT HOW DO I GET THE CHARTS. Here is where we start the coding.

1. Navigate to Portals

2. Web templates

3. Select new

4. Provide a Name

Now what I can do is put in additional web templates or create it from scratch. How I am going to start this is that I want to bring in another web template so I do not have to retype the code.

I will include another layout and include a copy snippet so administrators can add additional content if they wish.

I use the {% block main %} so I can have this in its own container so the content will not run into the footer of my page.

Now here we can add our charts into the portal. First I want to include a <div> for my charts then make sure the bootstrap grid system, col-6 col-md-6, is viewable either from the Web or on a mobile device. Then I will include my chart id guid along with a view for my dataset for the chart to render.

My dashboard also included a list view as well. I want to control the placement of an entity list inside of the Liquid to make it looks nice. On the next line, I will just include another “include” tag for the entity list I specify on the page template. DO NOT FORGET TO CLOSE YOUR BLOCK.

Next navigate to a page template to be used on the ITSM Portal

In the page template, I will specify the type as “Web Template” so I render a page using my Liquid template.

I will then navigate to my portal to check out how it looks! I have pre-created my web page and wanted to highlight a few key areas. Remember the tag we put in for our entity list now? Here is where I specify what entity list I want to use. I am using the Provance out-of-the-box “ITSM – Active/Closed/All” entity list.

Drum roll please!!

Here is our finished product. The great thing about Liquid is that it automatically enables entity permissions so based on the logged in user of the portal they will only see the tickets they have access too!

There are so many great things you can do with Provance IT Service Management for Dynamics 365. Let us help you bring your traditional service management to Modern Service Management and better serve your customers. Watch a webinar on how to evolve from traditional ITSM to Modern Service Management.


Ready to Get Started

At Provance, we go out of our way to bring you great service. That’s in our digital DNA. Your IT success is our success.

Return to top