Adding Native Components to Canvas

The Canvas Label allows you to easily add headings and descriptive text directly within the Canvas reports, ensuring that end users have all the important context within their reports.

When you drag and drop a Label onto your Canvas, a Format dialog opens on the right side of the screen. In the Format tab, you can edit properties such as name, width, height, padding, and margin. You can also define your label's background color, visibility, radius, border, font style, and alignment here.

The Visibility feature enables you to control whether a Label should be visible to your end user or not. By default, the Label's visibility is an Expression with the value "=TRUE", but you can use a variable or another Expression, e.g., FALSE, to change (hide) it. When you hide a Label, the remaining components dynamically adjust to occupy the vacant space. If you wish to maintain the hidden Label’s space and preserve your Canvas layout, you can utilize the Keep space option.

To delete your Label, you can either choose the Delete Label option in the Format tab, right-click on your Label and select Delete, or select the Label and press the Delete key on your keyboard.

Editing Labels

Once you have positioned your Label onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Label onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Label.

Label size limits (Min/Max)

The Labels in Canvas have defined minimum and maximum dimensions, and entering values outside these limits will not resize the Labels. The table below provides detailed information on these height and width limits.

Component	Minimum width	Maximum width	Minimum height	Maximum height
Label	8 px	1600 px	8 px	1200 px

The Canvas Combobox allows you to add and configure filters directly within Canvas reports. The end users can apply filters to dynamically change the charts, KPIs, and data tables presented in their Canvas reports.

Format tab

When you drag and drop a Combobox onto your Canvas, a dialog opens on the right side of the screen. In the Format tab, you change the name, width, visibility, and text color of your Combobox or add an Action, a margin or border to it. The Visibility feature enables you to control whether a Combobox should be visible to your end user or not. By default, the Combobox's visibility is an Expression with the value "=TRUE", but you can use a variable or another Expression, e.g., FALSE, to change (hide) it. When you hide a Combobox, the remaining components dynamically adjust to occupy the vacant space of the hidden Combobox. If you wish to maintain the hidden Label’s space and preserve your Canvas layout, you can utilize the Keep space option.

You can also add a Label to your Combobox through the Show label option, and use a static value, a variable, or an Expression as your Label text. You can change the position and width of the Label text and customize its font style and alignment.

To delete your Combobox, you can either choose the Delete Combobox option in the Format tab, or right-click on your Combobox and select Delete.

Data tab

In the Data tab, you can choose between a Simple data source, an Expression, a Subset, and an ODBC query as the source of your Combobox.

• You can define a data source in the Simple data source section by quickly and easily selecting a Database, Dimension, Element, and Alias. The "Apply" and "Apply dimension" buttons have different functionalities. If you want to use a simple Subset through the Select Elements dialog of the native Combobox and add an Alias to it, click on the "Apply" button. If you want to use a full dimension as a source and combine it with an Alias, click on the "Apply dimension" button.
  Note that only visible elements are selected and added when you use "select all" and click the "Apply" button. But when you use the "Apply dimension" option, all elements (consolidated, base elements, etc.) of the dimension are added to your data source.
  
  You can also set the connection/database for your Combobox source data using variables, named range, and settings key to incorporate your Canvas report into models. Note that in this case, both the connection and database names should be written correctly, for example: localhost/Biker
  Notes:
  • When using the "Simple Data source" option, the "stored Subset" dropdown is only used to filter the elements on the right-side inspector panel, making it easier to manually select specific elements.
  • The stored Subset will not be applied directly to the Combobox. Instead, the Combobox will display either the full set of options or the elements manually selected on the right side.
  

• When you select an Expression as a data source, you will see a default Expression. You can use this Expression as an example or edit it as you like.
  
  When you click on the "Edit expression button", a pop-up shows up. You can edit the expression in this pop-up, and your expression's result is shown instantly.
  

• Subset: see the Subsets Overview article.

• ODBC query see ODBC Connections in Jedox Web Spreadsheets.

The next time you use a Combobox, the database and cube for the Combobox are pre-populated using the data from the last Combobox you have defined.

Editing Comboboxes

Once you have positioned your Combobox onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Combobox onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Combobox.

Combobox size limits (Min/Max)

The Comboboxes in Canvas have defined minimum and maximum dimensions, and entering values outside these limits will not resize the Comboboxes. The table below provides detailed information on these height and width limits.

Component	Minimum width	Maximum width	Minimum height	Maximum height
Combobox	90 px	700 px	The minimum height settings remain unchanged, as they cannot be modified by the user.	The maximum height settings remain unchanged, as they cannot be modified by the user.

The Canvas KPI Card displays the most important summary measures from your data and allows you to evaluate the status of a measure by comparing key indicators to a target or comparison measure. Canvas KPI Card's visual cues allow end users to track and communicate progress toward a measurable goal easily.

Format tab

When you drag and drop a KPI Card onto your Canvas, a dialog with two tabs opens on the right side of the screen. In the Format tab of the KPI Card, you can configure the properties such as name, width, visibility, padding, margin, background color, and radius. The Visibility feature enables you to control whether a KPI Card should be visible to your end user or not. By default, the KPI Card's visibility is an Expression with the value "=TRUE", but you can use a variable or another Expression, e.g., FALSE, to change (hide)it. When you hide a KPI Card, the remaining components dynamically adjust to occupy the vacant space. If you wish to maintain the hidden KPI Card’s space and preserve your Canvas layout, you can utilize the Keep space option.

The lower section of the Format tab enables you to customize the font style and alignment of the different sections of the KPI, i.e., Title, Value, and Comparison. In this section, you can also use the Delete KPI option to delete the KPI. It is also possible to delete the KPI by right-clicking on it and selecting Delete.

Data tab

In the Data tab, you can define the primary measure to display on your KPI Card by selecting a cube and configuring the dimension values. You can select an Element, a variable, or an Expression for each dimension. You can also set the connection/database for your KPI Card source data using variables, named range, and settings key to incorporate your Canvas report into models. Note that in this case, both the connection and database names should be written correctly, for example: localhost/Biker

The Canvas KPI formatting option enables you to select between for formats: Number, Currency, Percentage, and Time.

• In the Number format, you can decide on the number of decimals and use the Auto Scaling option. Enabling the Auto Scaling option results in dynamic number formatting. This way, the numbers below a million are automatically shown with a "K" (for Kilo, or thousands), the numbers below a billion are shown with an "M" (for Million), and the numbers over a billion are shown with a "B" (for Billion). You can also change the K, M, and B abbreviations.
  The Use 1000 separator option makes reading large numbers easier by adding visual indicators to your numbers.

• The Currency format is like the Number format with an additional currency symbol option.

• The Percentage Format is useful for ratio-relevant topics.

• The Time format is useful for time-relevant topics.

Comparison value option

You can add a comparison value to display a comparison indicator on your KPI Card. To do this, select the Comparison value option in the KPI Data tab. You can use either a Fixed value or a Data point (an aggregated cube value). For a Fixed Value, you need to add the value manually. You can use the Data point option by dragging and dropping dimensions from your primary measure dimensions or clicking the Add dimension button. You can select an Element, a variable, or an Expression for the comparison.

You can set a Label, choose a type (Value, Variance, % Variance, and Label only), and decide on the number of decimals for the Comparison value.

The Indicator option provides clear visual indicators that show the Comparison value’s relationship to the primary measure of your KPI. You can decide on a color code for each relationship type. You can also add a symbol and variance in percentage by using the Show symbol and Show Variance options.

The next time you use a KPI, the database and cube for the KPI are pre-populated using the data from the last KPI you have defined.

Drill Anywhere in KPI Cards

End users can utilize the Drill Anywhere functionality in Canvas too. Right-click on any KPI Card and hover your cursor over "Drill By…" from the context menu. You will be presented with a list of all the Dimensions that comprise the Cube the KPI Card is built from.

Editing KPI Cards

Once you have positioned your KPI Card onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your KPI Card onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your KPI Card.

KPI Cards size limits (Min/Max)

The KPI Cards in Canvas have defined minimum and maximum dimensions, and entering values outside these limits will not resize the KPI Cards. The table below provides detailed information on these height and width limits.

Component	Minimum width	Maximum width	Minimum height	Maximum height
KPI Card	60 px	1600 px	Does not need to be adjusted, as it can only be modified by the user's padding settings.	Does not need to be adjusted, as it can only be modified by the user's padding settings.

The Canvas native Button simplifies and accelerates the report-building process for you. When you drag and drop a Button onto your Canvas, a Format dialog opens on the right side of the screen. In the Format tab, you can add an Action, a Content, and a Tooltip to your Button. The Content and Tooltip can be a static value, a variable, or an Expression.

You can edit properties (such as name (ID), width, height, padding, and orientation) and define your Button's color, radius, border, font style, and alignment here. You can decide between the Auto or Custom modes when coloring your Button. The Auto mode is quicker, while the Custom mode provides more options. When you choose the Custom mode, you can assign different colors for when Canvas users hover their cursor over the Button or when they click on it.

The Visibility feature enables you to control whether a Button should be visible to your end user or not. By default, the Button's visibility is an Expression with the value "=TRUE", but you can use a variable or another Expression, e.g., FALSE, to change (hide) it. When you hide a Button, the remaining components dynamically adjust to occupy the vacant space. If you wish to maintain the hidden Button’s space and preserve your Canvas layout, you can utilize the Keep space option.

You can also add symbols (GIF, JPG, JPEG, PNG, SVG) to your Canvas Buttons. To do this, use the Add Symbol button. Once the symbol is uploaded, you can see a Symbol inspector at the button of the format tab.

In this section, you can replace the symbol, delete it, and change its position, gap, and size. By default, Canvas symbol sizes are set to maintain the ratio. If you want to turn off this option, click on the chain icon on the right side of the symbol size once. Clicking on the chain icon the second time turns the option back on.

Editing Buttons

Once you have positioned your Button onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Button onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Button.

Buttons size limits (Min/Max)

The Buttons in Canvas have defined minimum and maximum dimensions, and entering values outside these limits will not resize the Buttons. The table below provides detailed information on these height and width limits.

Component	Minimum width	Maximum width	Minimum height	Maximum height
Button	8 px	1600 px	8 px	1200 px

This native component enables you to incorporate a Checkbox into your Canvas, providing functionality such as creating lists or toggling various settings on and off.

When you drag and drop a Checkbox onto your Canvas, a Format dialog opens on the right side of the screen. In the Format tab, you can add an Action, a Target (named range or variable), and a Tooltip and a Label that can be static or dynamic (via variable or Expression) to your Checkbox and decide on the State of the Checkbox. You can also configure the properties such as Name (ID), width, color of the Checkbox, Box Style, and visibility. The Visibility feature lets you control whether a Checkbox should be visible to your end user. By default, the visibility of a Checkbox is an Expression with the value "=TRUE", but you can use a variable or another Expression, e.g., FALSE, to change (hide) it. When you hide a Checkbox, the remaining components dynamically adjust to occupy the vacant space. If you wish to maintain the hidden Checkbox’s space and preserve your Canvas layout, you can utilize the Keep space option.

You can disable the Checkbox Label by deselecting the "Show label" option. You can also change the position, gap, and width of the Label text and customize its font style and alignment.

Please be aware that the value displayed in the "Width" field of the Checkbox Format dialog represents the combined width of both the Label and the Checkbox. If you disable the Checkbox label, you will no longer be able to adjust the width, and it will remain fixed at 16, representing the Checkbox size.

To delete your Checkbox, you can either choose the Delete Checkbox option in the Format tab, right-click on your Checkbox and select Delete, or select the Checkbox and press the Delete key on your keyboard.

Editing Checkboxes

Once you have positioned your Checkbox onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Checkbox onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Checkbox.

Canvas Image enables you to directly and easily add images (GIF, JPG, JPEG, PNG, SVG) within the Canvas environment. In the Format tab, you can select a Name (ID) for your Image, replace it, change its visibility and size, and add a radius and border to it.

By default, Canvas Image sizes are set to maintain the ratio. If you want to turn off this option, click on the chain icon on the right side of the Image size once. Clicking on the chain icon the second time turns the option back on.

Editing Images

Once you have positioned your Image onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Image onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Image.

Images size limits (Min/Max)

The Images in Canvas have defined minimum and maximum dimensions, and entering values outside these limits will not resize the Images. The table below provides detailed information on these height and width limits.

Component	Minimum width	Maximum width	Minimum height	Maximum height
Image	8 px	1600 px	8 px	1050 px

The Canvas Dynatables feature empowers users to build real-time analytics swiftly and efficiently. With its intuitive interface and dynamic data capabilities, users can generate insightful reports and visualizations on the fly, streamlining the decision-making process and enhancing data-driven outcomes.

Adding Dynatables to the Canvas

When you drag and drop a Dynatable onto your Canvas, a dialog box appears, prompting you to select a Dynatable from your saved Dynatables or build a new one. After choosing the desired Dynatable, a preview is displayed. You can then adjust the Dynatable as needed before clicking Apply to confirm your changes.

Format tab

Once your Dynatable is applied to your Canvas, a dialog with two tabs opens on the right side of the screen. In the Format tab, you can configure properties such as padding, size, frame radius, border, and background color. The lower section of the Format tab enables you to delete the Dynatable. It is also possible to delete the Dynatable by right-clicking on it and selecting Delete.

Data tab

You can use the "Edit Dynatable" option in the Data tab to modify, rearrange, and customize your Dynatable to suit your needs.

Editing Dynatables

Once you have positioned your Dynatable onto your Canvas, you can still edit it in many ways. You can copy/cut and paste your Dynatable onto different frames and stacks, move it around by dragging and dropping it, and undo/redo your formatting and placement of your Dynatable.

You can also interact with the Dynatable using the native Combobox feature. By linking a variable to the Combobox, any updates made to the Combobox will automatically reflect in the Dynatable, ensuring real-time synchronization.