Search for answers or browse about Sintel Forms.
Smart Card
The Smart Card component in Sintel BI allows users to present textual information alongside numerical data in a clear, engaging format. It is a flexible, visually appealing tool that enables you to highlight key figures and insights from your data.
This guide will walk you through the features, setup, and practical examples of how to use the Smart Card component effectively.
1. Adding the Smart Card
To add a Smart Card to your dashboard:
Drag and drop the Smart Card component onto your desired location in the dashboard.
Resize it to suit the space and design requirements.
2. Configuring the Smart Card
Once added, you can configure the following options from the properties panel on the right:
– Text Settings
Title: Add a title that summarises the purpose of the card (e.g., “Total Revenue”).
Subtitle: Provide an optional subtitle for additional context (e.g., “Q1 2024”).
Description: Add more detailed text if needed (e.g., “This card shows the total revenue generated in Q1”).
Icon: Choose an icon that represents the data visually (e.g., a money symbol for financial figures).
Title Alignment: Choose whether the title is left, centre, or right aligned.
– Link Settings
Link: You can make the Smart Card clickable by adding a URL. When a link is added, a small clickable icon will appear next to the title.
Link Description: Add a description for the link, providing users with context.
Open in New Tab: Select whether the link should open in a new tab or in the current tab.
– Security Settings
Visibility: You can configure who can see the Smart Card:
-
- Public: Anyone can view the Smart Card.
- Private: Restrict the card’s visibility and share it only with specific groups or users.
– Look and Feel Settings
Elevated Border: Add or remove an elevated border for visual emphasis.
Background Colour: Choose a background colour to make your card stand out.
Mobile Visibility: Select whether the Smart Card is visible on mobile devices.
Assigning Data to the Smart Card
Once you’ve configured the card’s appearance, you can assign data to it. Here’s how:
- Select a Data Source: Choose the relevant data source for the Smart Card.
- Select Text: You can use @ to insert dynamic data from numerical columns into the card’s text. For example, if you want to display total sales, use @sales in the description or title.
- Custom Code (Optional): If you’d like to add custom HTML you can s insert custom code.
3. Examples of Using the Smart Card
Here are some examples of how you might use the Smart Card in different scenarios:
– Sales Performance Overview
Display key sales metrics for a specific time period.
- Title: “Total Sales”
- Subtitle: “Q3 2024”
- Description: “The total sales for this quarter have reached @TotalSales.”
- Icon: 📈 chart-line-up (light)
- Data: @TotalSales pulls in data from the “Sales” column.
Use Case: This is perfect for executive dashboards, where key figures need to be highlighted quickly.
– Visitor Insights
Present your monthly traffic figures.
- Title: “Visitors”
- Subtitle: “October 2024”
- Description: “We had a total of @Visitors website visits this month.”
- Icon: 🌐 globe (light)
- Link: Add a link to the detailed analytics report.
Use Case: This card could be used by marketing teams to track the effectiveness of campaigns and measure user engagement.
– Financial Performance Indicator
Show key financial figures like profit or revenue.
- Title: “Total Revenue”
- Subtitle: “Year-To-Date”
- Description: “The revenue so far is @Revenue.”
- Icon: 💰 money-bill (light)
– Project Progress Report
Track the progress of a key project in your organisation.
- Title: “Project ABC Progress”
- Subtitle: “October 2024”
- Description: “The project is currently @Completion% complete.”
- Icon: 📅 calendar (light)