Beautiful, modern, rich dashboard Advice & Chat

Hello to the knack community

I have a working application and I’m trying to make it look good.
To do this, I’d like to get a front page in the form of a dashboard. I’d like to be able to display kpi linked to data present in the data, but also additional information, such as a twitter feed with news from the field I’m working in.

As appearance is 'quite’everything these days, I’d like to have something ‘beautiful’, which I can’t quite manage to do at the moment. For example :

Have you already set up such pages, and if so, do you have any techniques to recommend? Rich text, Iframe, other?

I’m calling on the community :wink:
Thanks for the advice

2 Likes

I had a team member build a great dynamic dashboard for an integrated business management system in Local Government. We leveraged Knack’s awesome way that you can present and report on data related to the logged in user. To make it work, we set up the data so that all the tasks, projects, actions being linked to both the employee and their supervisor and manager, and in the front end that is achieved through position based management.

In terms of displaying that on the dashboard - we started by just using Knack’s in built pivot tables and graphs. The pivot tables calculate totals (e.g. number of overdue actions). We then wanted to display dynamic notifications so that staff can see what is due and overdue, but hide them when the values are 0. And, we also wanted the built in Knack graphs to be better displayed next to these values. So we used the following components:

  1. Loaded the full bootstrap library for html components in our custom CSS - we may have been able to use the built in Knack components but it didn’t have everything we wanted, and bootstrap enables device independence. This was a pretty complex step because some of the components conflicted with knack’s built in components, so the library item names all needed to be modified. But now that it’s in we can use the components throughout.
  2. Wrote custom html and put it into a Rich Text view to create the dashboard built on Bootstrap components
  3. Added native Knack views on the same page with all the pivot tables and graphs we want in the dashboard - about 30 views!
  4. Wrote javascript that runs on page load to read the Knack pivot tables and graphs and do a mix of inserting values, moving graphs and doing calculations to populate the custom html elements. And, along the way, this code hides elements that should not be shown (e.g. 0 value notifications).

We could enhance it further with custom graphs, but for the most part, the overdue/view notifications is where the true value for us lies - and that part works awesome.

Here is the finished result:


and here it is when it’s loading before the javascript moves the data and hides 0 elements:

Sometimes I wish there was 4 columns instead of three.

Here is a sample of ours:

Thanks a lot @GrantSchuster and @IAmAKnacker

Obviously this is the example that great dashboards can be done with Knack.
I will work on this !

Of course, you could use an external dashboard service, link data to Google sheets etc and embed like this.

https://wasabi.knack.com/wasabi-digital#kpi/

Use API to push your data to any cloud service eg Google Sheets.