Creating Dashboard 'Cards' in Knack

Those of you who have been looking at alternatives to Knack often cite the ability to create 'cards' on their dashboards and other pages. For those who don't know what I mean by cards, this is what we're going to create:

In this case the numbers refer to a photo club database...

So I set about trying to find the simplest way to create these cards in Knack using as little code as possible.

The Knack Solution

It turns out that the solution to this problem is simple - you just need to create a CSS 'class' for the 'box' the card is in:

/*for producing Cards...*/ .card { box-shadow: 10px 10px 8px #aaaaaa; padding: 7px 10px; width: 100%;

text-align: center; border-radius: 7px; }

Simply copy this code into your CSS editor in Knack - and you can always play around with the settings yourself...

The next step is to set up a Text Formula field to display your data and the heading within the card. Once again this is quite simple - here's an example (using the New Builder):

And here's the formula for you to copy:

<div class="card"> <h3 style="color:red;">Storage Used</h3><hr />{Image Storage Used}</div>

You can edit this formula, replacing {Image Storage Used} with the field you want to display on the card and Storage Used with the heading for the card. The <hr /> puts the horizontal line between the heading and the data value. Obviously you can also change the colour etc.

Finally, you just need to add the formula fields to a view (I used a 3 column view - again in the New Builder):

You're likely to want to delete out the view's heading and also the field labels.

So, that's it! Knack is a very versatile platform and with small amounts of code you can really make it look great.