Card Component

What are cards?

Cards enable you to add static or dynamic single points of data on a component that looks a bit like a card. 

When should I use cards?

Cards are mostly used on dashboard or any page where you want to add a summary in  a clean design with custom title, icons and footers. 

Adding Cards

To add a card choose the card component and then choose the data table to be used for this card

 

Inside the calendar component you'll see have some standard options available in other components, as well as unique settings only available in the calendar component. 

1. Data Source
2. Calculations
3. Design

 

Data Source

For this component the data source is unlike the other components and only shows the table being used for display of component. 

 

Calculations

Here you can choose what to display as the primary content on the card. You can choose from the following options: 

• Static or Formula

Static

Static will simply display a static (non dynamic) value that you enter here. 

 

Formula

With formula you can choose to summarize values from the table you chose when adding this component. 

You can choose from 5 formulas: 

• Count
• Minimum
• Maximum 
• Average
• Sum

You can also add conditions to determine which records should be used int he calculation.

For example, Count all the Jobs where Job Status is Job Scheduled

 

 

When working with other formulas that require another parameter, like SUM which we must also decide which field to sum, you'll have another option to choose that number field. 

You can also enable Auto Refresh which will refresh this component every 30 seconds. This is useful when displaying statistics on a TV monitor so you don't need to constantly refresh. 

Finally, you can choose to add a thousands delimiter to the output: 

 

 

Design

In the design tab you can customize much of how the card is displayed including: 

• Header
• Footer
• Content
• Border
• Icon 
• Shadow

Here are all the sections

Header

Header can be customized with custom text, size, alignment and color. 

Footer

Footer can be customized with custom text, size, alignment and color. 

Content

Content can be customized with size, color, alignment as well as a prefix or suffix to be added next to the value outputted. For example, you can add a currency symbol as a prefix or a % sign as the suffix. This can be anything you wish. 

Border

Border can be customized with which sides should have a border, the width, color and radius. 

Icon

Choose a default icon and its position and color,  

Icon can be customized with display rules that will modify the icon based on the values. For example, 

• If revenue is above $25,000 show a green smiley face. 
• If revenue is lower than $20,000 show a red frown
• Otherwise, show a blue 'meh'