Custom HTML Dashboard
Hello,
i was looking to create a custom Dashboard in Ninox to have a clear overview over some important KPIs and also allow controllers to get a quick view at key data.
With the help from this great community i was able to create a common dashboard with the form view, but for me personally, the styling and layout options in Ninox are too limited to create a clean and modern dashboard view. The current options are totally okay, but i was looking for something more extended.
Today i want to share my custom HTML dashboard with you and i hope the information will be useful for your own projects.
Here is a screenshot of the dashboard:
In its current version it features card style statistic boxes and a custom table.
The entire dashboard is only one formula field.
So here is what i´ve done:
At first, i needed a html layout and css styling. If you dont like to code it yourself, you can google for a free html dashboard generator like i did. It allowed me to build a sample dashboard by drag and drop and afterwards it let me export the html and css files. (i used loopple . com)
After you got your code now, open the files in your favorite code editor, i prefer Visual Studio Code.
Open the index.html file that contains your dashboard html layout. Remove any code that you dont want as well as any scripts that may be included, we don´t need them.
At the very end of the file add <style> </style>
Now copy all the contents from the .css file(s) and paste them in between the style tags. Now you have all the code in one file.
The next step is to prepare the code for use i the Ninox Formula field.
In Visual Studio Code, click on the search Icon in the sidebar and search for " and replace it with ""
Click replace all and afterwards your code should look like this:
That´s all. Now press Ctrl + A and copy all of the edited code.
Go to your Ninox Dashboard Table, create a Form View and a new Formula Field.
To add your code, wrap it inside the html() function like below:
html(" paste your code here ")Save it, and you should now already see your new dashboard.
In the next step, we will bring it to life:
To add data to your dashboard, you need to chain in the data you like. Here is an example of how to place data inside one of the card boxes:
Create your variable first, don`t place the code directly into the code. You will get lost if you edit it later.
let variable := sum((select 'Table1' where 'Status' = 1 and 'YXZ' = 1).'YourValue');
Now chain it into the html on the right place. If you used a generator for your html, you probably have some sample text for orientation.
Remove the sample text and replace it with your variable like this:
<h1 class=""mt-1 mb-3"">" + variable + "</h1>
<div class=""mb-0"">
<span class=""" + if percent > 0 then "text-success" else "text-danger" end + """> <i class=""mdi mdi-arrow-bottom-right""></i>" + round(percent, 2) + "%" + "</span>
<span class=""text-muted"">seit" + last_stat_date + " (" + last_stat_data + ")" + "</span>
Well, in this example i put an if function directly inside the code :).
What`s important to do here is to always place your code like this:
" + your code/variable + "End the html with a quote and begin it with a quote after the code, this way you won´t break your html.
In the example above i not only placed my data inside the card box, i also added an if statement that changes the css class to either show a green text for positive trend or red text for a negative trend:
From now on, you are free to extend it in every way you like. For example with a auto generated table:
[...]
<tbody>"
+ for i in variable do
"<tr>
<th scope=""row"">" + i.Value1 + "</th>
<td>" + count(i.Value2) + "</td>
<td>" + i.Value3 + "</td>
<td>" + i.Value4 + "</td>
<td>" + i.Value5 + "</td>
</tr>"
end +
"</tbody>
[...]
That´s it, now you have your very own and customized dashboard 
PS: You can´t only do dashboards like this, i also used it to create branded email templates for example.
I hope this tutorial will help you in some way to get the best out of your Ninox experience.
If you have any additions or better solutions, please share them. Im not an expert by any means and learned everything i did in Ninox by trial and error and with the help of this community.
Cheers!
37 replies
-
Thanks for sharing! Looks very good!
-
I have also uploaded a sample database with the dashboard to the Webinar Team: "Custom HTML Dashboard".
-
Alex can u upload one here? not everyone has got access to the webinar.
-
Fred Sure, here you go
-
Alex Thanks Alex very grateful for sharing this info
-
-
How much of that code really needs to be programmed? There are more than 700 lines for four easy KPI'S, if you need the Earned Value, Total Cost, CPI, SPI, EAC, ETC is to leave life
-
Rafael Its up to you. The free dashboard generator generated a lot of code and it could be stripped out still i guess. if you do the html/css yourself you would of course have a much cleaner code - but i wanted to show the low-code way without writing any html/css.
If you want to use my example as is, you only need to add and swap variables. If you need more cards just duplicate the formula field. you can leave out the css, it only needs to be there one time (per view). -
Alex Hi Alex, my 4 box I have Horas Ganadas (Earned Hours) 4,013 and the 63.68% is the Project Progress at the 02.09 the Cutoff Date. I try to place the 63.68% in the place on Earned Hours, and the Earned Hours on the %, but I can't aling the element.
Some help ?
-
Alex
The problem
<h5 class=""card-title"">Horas Ganadas</h5> </div> <div class=""col-auto""> <div class=""stat text-primary"">
</div>
</div>
</div>
<div class=""mb-0"">
<h1 <span class=""" + if EarnedValue > 0 then "text-success" else "text-danger" end + """> <i class=""mdi mdi-arrow-bottom-right""></i>" + round(EarnedValue, 2) + "% </h1> </span>
<class=""mt-1 mb-3"">" + format(number(HorasReales), "#####,## hh") + ">
<span class=""text-muted"">Avance al: " + format(CutOff, "DD.MM") + "</span>
</div>
-
Rafael Hello Rafael, for a simple solution try to add a <br> before to add a line break
<class=""mt-1 mb-3""><br>" + format(number(HorasReales), "#####,## hh") + ">
-
-
Thanks for the clear explanación Alex.
-
Alex
The changed are complicated but on the way.
-
Alex
Hi Alex Sorry,
but have one problem, On the web versión I see a slider and I don't know how eliminate it. On the Tablet is perfect. -
Rafael I think the slider becomes visible because your formula field isn't big enough to display all the information or one or the other html (maybe a <div> element) is too big) .
Steven -
RoSoft_Steven Hi Steven I'll check your tips, my first steps with html & css what a mess
. It's a way to present certain data ina better way, but difficult.
-
-
Hi Alex, this is amazing! Thank you very much for sharing.
I am not familiar with coding or else, but enough to understand a little bit to be able to adapt by learning by doing.
I noticed one issue and I cant find a way to get it resolved. In the sidebar on the left and dashborad the fonts are different than in other tables.
Do you face the same issue?
When I dig into the code I find teh snippet about fonts, but no way for me to get it resolved.
I deleted the snippet, I entered in global functions but nothing happened.
Do you may have an idea how to get the same font everywhere?
Thanks a lot in advanced
Kruna
-
Kruna Hey, this comes from the body attributes. In the <style> part, check for body { ... } and remove all font specific attributes there (font-family, font-size, font-weight, line height) and it should be gone!
-
Alex Hi Alex
I modify your code and really lock good, I work on Android Tablet S8, but on Web version appear a slider do you know what happens ?
-
Alex wow!!! That did it!!! Thanks a lot for the hint!
-
Rafael If you get a slider the formula field needs to be bigger. If it´s a horizontal slider, you would need to edit widths, margins and paddings in the css to shrink everything down - it would be too individual to your table to provide a solution here, sorry (maybe do a search in the code for margin / padding and play around with the values)
-
Alex Thank Alex the slider is horizonta, I will review that
. -
Alex Hi Alex you have some example like gauge control ?
-
-
Hi Alex, excuse me, if I bother too much, but there's one more issue I got stucked. I believe its somewhere in CSS too, but I cant find it at all and I hope you may know where this piece of code may be.
As you can see in image the buttons Feld löschen and OK are outside the box.
Do you have an idea where to change that?
Thnx a lot in advanced!
Kruna
-
Kruna
#{-------------- Definir variables y sus formulas para ser usadas posteriormente --------------}#; let HorasReales := sum((select DOCUMENTOS).'Horas Ganadas Real'); let HorasPlan := sum((select DOCUMENTOS).'Horas Ganadas Plan'); let EarnedValue := sum((select DOCUMENTOS).'Horas Ganadas Real') / sum((select DISCIPLINAS).Horas_Hombre_D) * 100; let Plan := sum((select DOCUMENTOS).'Horas Ganadas Plan') / sum((select DISCIPLINAS).Horas_Hombre_D) * 100; let CutOff := first((select DOCUMENTOS).DataDate); "---------------Codigo HTML--------------"; html("<head> </head> <body class=""null""> <main class=""content""> <div class=""container-fluid p-0""> <h2> Project Physical Progress - <span style=""font-size:12px;"">" + today() + " " + time() + "</span></h2><br> <div class=""row removable""> <div class=""col-sm-3""> <div class=""card""> <div class=""card-body""> <div class=""row""> <div class=""col mt-0""> <h5 class=""card-title""> Physical Progress (Plan vs Real) </h5> </div> <div class=""col-auto""> <div class=""stat text-primary"">
</div>
</div>
</div
<div class=""mb-0"">
<h1 <span class=""" + if EarnedValue > 0 then "text-success" else "text-danger" end + """> <i class=""mdi mdi-arrow-bottom-right""></i>" + round(Plan, 2) + "% vs " + round(EarnedValue, 2) + "% </span> </h1> <div> <br>
<class=""mt-1 mb-3"">" + format(number(HorasReales), "#####,## MH Earned") + "
<span class=""text-muted""> - Progress To: " + format(CutOff, "DD.MM") + "</span>
</div>
</div>
</div>
</div>
</main>
</body>
<style>
:root {
--bs-blue: #3b7ddd;
--bs-indigo: #0a0a0a;
--bs-purple: #6f42c1;
--bs-pink: #e83e8c;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #fcb92c;
--bs-green: #1cbb8c;
--bs-teal: #20c997;
--bs-cyan: #17a2b8;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #3b7ddd;
--bs-secondary: #6c757d;
--bs-success: #1cbb8c;
--bs-info: #17a2b8;
--bs-warning: #fcb92c;
--bs-danger: #dc3545;
--bs-light: #f5f7fb;
--bs-dark: #212529;
--bs-primary-rgb: 59, 125, 221;
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 28, 187, 140;
--bs-info-rgb: 23, 162, 184;
--bs-warning-rgb: 252, 185, 44;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 245, 247, 251;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: #fff;
--bs-body-bg-rgb: #fff;
--bs-font-sans-serif: ""Inter"", ""Helvetica Neue"", Arial, -apple-system, BlinkMacSystemFont, ""Segoe UI"", Roboto, ""Noto Sans"", sans-serif, ""Apple Color Emoji"", ""Segoe UI Emoji"", ""Segoe UI Symbol"", ""Noto Color Emoji"";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, ""Liberation Mono"", ""Courier New"", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #fff;
--bs-body-bg: #fff;
}
*,
:after,
:before {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
body {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #fff;
color: var(--bs-body-color);
line-height: var(--bs-body-line-height);
margin: 0;
text-align: var(--bs-body-text-align);
-webkit-overflow-scrolling: hidden; /* lets it scroll lazy */
overflow:hidden;
}
hr {
background-color: currentColor;
border: 0;
color: inherit;
margin: 1rem 0;
opacity: 0.25;
}
hr:not([size]) {
height: 1px;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-weight: 300;
line-height: 1.0;
margin-bottom: 0.5rem;
margin-top: 0;
}
.h1,
h1 {
font-size: 1.75rem;
}
.h2,
h2 {
font-size: 1.53125rem;
}
.h3,
h3 {
font-size: 1.3125rem;
}
.h4,
h4 {
font-size: 1.09375rem;
}
.h5,
.h6,
h5,
h6 {
font-size: 0.875rem;
}
p {
margin-bottom: 1rem;
margin-top: 0;
}
abbr[data-bs-original-title],
abbr[title] {
cursor: help;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
font-style: normal;
line-height: inherit;
margin-bottom: 1rem;
}
ol,
ul {
padding-left: 2rem;
}
dl,
ol,
ul {
margin-bottom: 1rem;
margin-top: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin-bottom: 0;
}
dt {
font-weight: 600;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
b,
strong {
font-weight: bolder;
}
.small,
small {
font-size: 80%;
}
.mark,
mark {
background-color: #fcf8e3;
padding: 0.2em;
}
sub,
sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
a {
color: var(--bs-primary);
text-decoration: none;
}
a:hover {
color: #2f64b1;
text-decoration: underline;
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
.wrapper {
align-items: stretch;
background: #222e3c;
display: flex;
width: 100%;
}
.content {
direction: ltr;
flex: 1;
max-width: 100vw;
padding-right: 2rem;
padding-left: 2rem;
width: 100vw;
background-color:#fff;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
margin-left: auto;
margin-right: auto;
padding-left: var(--bs-gutter-x, 0.75rem);
padding-right: var(--bs-gutter-x, 0.75rem);
width: 100%;
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1200px;
}
}
.row {
--bs-gutter-x: 24px;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--bs-gutter-x) * -0.5);
margin-right: calc(var(--bs-gutter-x) * -0.5);
margin-top: calc(var(--bs-gutter-y) * -1);
}
.row > * {
flex-shrink: 0;
margin-top: var(--bs-gutter-y);
max-width: 100%;
padding-left: calc(var(--bs-gutter-x) * 0.5);
padding-right: calc(var(--bs-gutter-x) * 0.5);
width: 100%;
}
.col {
flex: 1 0 0%;
}
.row-cols-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-3 > * {
flex: 0 0 auto;
width: 33.33333%;
}
.row-cols-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-6 > * {
flex: 0 0 auto;
width: 16.66667%;
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-1 {
flex: 0 0 auto;
width: 8.33333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.66667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.66667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.33333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.33333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.66667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.p-0 {
padding: 0 !important;
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.col-sm-1 {
flex: 0 0 auto;
width: 8.33333%;
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.66667%;
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.33333%;
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.66667%;
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.33333%;
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.66667%;
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.33333%;
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.66667%;
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.card {
word-wrap: break-word;
background-clip: border-box;
background-color: #fff;
border: 0 solid transparent;
border-radius: 0.25rem;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
.card > hr {
margin-left: 0;
margin-right: 0;
}
.card > .list-group {
border-bottom: inherit;
border-top: inherit;
}
.card > .list-group:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-top-width: 0;
}
.card > .list-group:last-child {
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-bottom-width: 0;
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
border-top: 0;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-title {
margin-bottom: 0.5rem;
}
.card-subtitle {
margin-top: -0.25rem;
}
.card-subtitle,
.card-text:last-child {
margin-bottom: 0;
}
.card-link:hover {
text-decoration: none;
}
.card-link + .card-link {
margin-left: 1.25rem;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: 0.25rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
.mt-5 {
margin-top: 3rem !important;
}
.mt-6 {
margin-top: 4.5rem !important;
}
.mt-7 {
margin-top: 6rem !important;
}
.mt-auto {
margin-top: auto !important;
}
.stat {
align-items: center;
background: #d3e2f7;
border-radius: 50%;
display: flex;
height: 40px;
justify-content: center;
width: 40px;
}
.stat svg {
stroke-width: 1.5;
color: var(--bs-primary) !important;
height: 18px;
width: 18px;
}
.text-primary {
--bs-text-opacity: 1;
color: var(--bs-primary) !important;
}
.text-secondary {
--bs-text-opacity: 1;
color: var(--bs-secondary) !important;
}
.text-success {
--bs-text-opacity: 1;
color: var(--bs-success) !important;
}
.text-info {
--bs-text-opacity: 1;
color: var(--bs-info) !important;
}
.text-warning {
--bs-text-opacity: 1;
color: var(--bs-warning) !important;
}
.text-danger {
--bs-text-opacity: 1;
color: var(--bs-danger) !important;
}
.text-light {
--bs-text-opacity: 1;
color: rgba(var(--bs-light), var(--bs-text-opacity)) !important;
}
.text-dark {
--bs-text-opacity: 1;
color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}
.text-black {
--bs-text-opacity: 1;
color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}
.text-white {
--bs-text-opacity: 1;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.text-body {
--bs-text-opacity: 1;
color: var(--bs-body-color) !important;
}
.text-muted {
--bs-text-opacity: 1;
color: var(--bs-secondary) !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: 0.25rem !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.mb-4 {
margin-bottom: 1.5rem !important;
}
.mb-5 {
margin-bottom: 3rem !important;
}
.mb-6 {
margin-bottom: 4.5rem !important;
}
.mb-7 {
margin-bottom: 6rem !important;
}
.mb-auto {
margin-bottom: auto !important;
}
</style>")
Hi I send the script
-
Rafael at the very beginning your script contains:
"---------------Codigo HTML--------------"; html("<head> </head> <body class=""null""> <main class=""content""> <div class=""container-fluid p-0"">it will may be a solution, I hope it helps - try to add:
<body class=""null"">
<div class=""wrapper"">
<main class=""content"">
<div class=""container-fluid p-0"">and at the end of Codigo HTML close the div by adding </div> right one line before </main>
I am not sure, if it helps, but in my case it did.
-
Content aside
-
8
Likes
- 8 mths agoLast active
- 37Replies
- 2368Views
-
11
Following