Card Report

A card report displays app data in a configurable card format which is used for supporting card-based methodologies such as Scrum and Kanban. This offers an alternative to List or Table reports that displays app data in a dense but easy to read format.

The fields displayed on the cards are defined or organised on a Template, similar to designing a form template but with some different layout features. A simple card has a single template; you can define a second template to make a double-sided card that you can flip to reveal the reverse. Furthermore, you can add any number of additional sides -  as Softools cards are not bound by the laws of geometry.

Configuration

There are two steps to configuring a card report:

1. Create the Card Template
2. Create the Card Report

 

Card Template

Before creating the card report, you would first need to create a card template which are used to organise the fields in the cards.

Creating a card template works the same as creating any other template which starts by clicking onto the blue 'Add' button at the bottom of the template form.

One slight difference is that you would need to change the template type to a card template then click onto 'Design Template' to organise the fields.

 

Card Report

Once you have selected and organised the fields for your cards click on Save to apply the changes and the card report can be created. The card report is created as any other report which is by clicking on the blue 'Add' button at the bottom of the report page and selecting the card report tile or by using the search filter. 

Title: The title is the reference to the Report that will appear in the UI for the users. It will appear in the left pane menu for the App and also in the breadcrumb at the top of the page which tells the user where they are on the site.
Sub Title: The subtitle is used as a longer description of the report and is shown in the head of the report
Identifier: The identifier is a system ID for referencing a Report. This ID must be unique per Report and must contain only letters and numbers starting with a letter. It must also be a minimum of three characters.

Report Group: Where there are many reports for an app, they can be grouped so that they appear as a section of reports under a drop-down menu on the left of the app page where the reports appear - Apps with the same group name appear within a group of the same name

Orientation: The direction of travel of the scrolling of the swim-lane. A vertical orientation would require to scroll up to down and a landscape orientation would require to scroll left to right. 

Base Filter: If the report is to always show a subset of records, then the base filter can be used to apply a permanent filter to the report. This filter is always applied, and then user-defined filters and searches are defined on top when the report is being used - For more about configuring base filters click here

Is Hidden?: This will hide the report from all users. It is commonly used whilst a Report is being reconfigured or if a Report needs to be removed temporarily to be reinstated at a later date.

Include Undefined Groups: When adding a filter on the report by default the cards which have no value will not show up. If you would like it to show up in an undefined group toggle this on.

Card Width: This is the width of the cards with a minimum width of 160px and maximum width of 1000px.

Card Height: This is the height of the cards with a minimum height of 100px and maximum height of 1000px.

Card Templates

With this section you select the card template you have created which will display the data from its specified layout. By clicking onto 'Add Card Template' it will open a pop up window where you can select your template.

With multiple card templates in a card report, the card template at the top will be shown as the first layer in a card. To access the other layers of the card click onto the flip icon at the top right of the card.

Report Visibility

Similar to how app visibility works this can be set to hide your reports from certain users or teams, this can be great for hiding reports from certain teams or guests, for example, if you have employee-based performance reports that you only want management to see so you set it so just that team can see it.

 

Adding grouping to Card Report

Previously, grouping would have been done in workspace through adding a grouping filter, but it is now a feature within app studio. Scroll down to Card Grouping Field where you can select which field to group the cards in the report. This will look like a header on the report which the cards will be displayed underneath, as shown:

Remember that if you have selected a group with a finite set of values such as a select list, all groups will be shown, even groups (in this case columns) with no value - this is because card reports allow drag and drop of cards between columns to change the value of the grouped field in the record being dragged. In the case above, we can drag a card from the red column to the amber column and this will change the value of the Status field within the record being dragged

 

Adding Styles to Card Report

The default style for card reports is a beige sand colour for the cards with a white background and a grey box background colour for group headers. The default colour may not be appropriate with the colour pattern or subject of your site, thus styles can be added to change the appearance of the card report. To add or edit a Style please refer to this following article.

By entering the 'Named Styles' section near the bottom of the card report in App Studio you can find the following:

 

This will bring up a separate box where you can select what style you would like and where to apply it to

 

The value section is not used in card reports so you cannot click on it.

• Report

Style has the options that are in the named styles of the app that you can add in app studio.

• Component

This is where you select what part of the card report you would like the style to be applied to 

 

• Report

Adding a style to the report tab will change the background for the card report. To change the background colour of the card report the first step would be to create the style, if it hasn't been created,  at the site level in the homepage of App Studio. Then change the background colour attribute to the desired colour.

Then add the newly created style to the card report under the report tab and select component as it's element. The background colour for the card report should now be changed and click on 'Publish'. If you don't see this immediately you may need to log out and log in to sync newly created styles.

• Group Header

As with the report styles, if you haven't created the style you would need to create style from the homepage of App Studio. 

With styles for group headers the styles can be applied to both the text and component element. The text element will change the text styles for the group header and the component would change the styles to the text and the box of the group header and publish the changes.

The following image shows a grouped card report with the styles applied to only the text element which has changed the font colour to a white beige colour, the font size to large and font weight to bold. If you do not see the styles applied to your card report you may need to log out an in to sync the newly created styles. 

But the background colour remains the same to apply the background style the element would need to be changed to component.

Note: Recommended to apply colours which are visibly different in tone for the Text and Background colours.

• Card

Likewise with the other styles, the first step to adding a style to the card in the card report is to create the style if it hasn't been created yet on the homepage of App Studio.  

Then add the style to the card report and select the component element to change the card styles and save and publish the changes.

The style should now be added to the card report in which the background colour of the card has changed to white with the font styles change to be larger and bolder. If you do not see the changes applied to your card report you may need to log out and log in to sync the newly created style.