Training
Module
How to build the User Interface in a canvas app in Power Apps - Training
In this module, learners will learn how to build UI for their app including theming, icons, images, personalization, form factors, and controls.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
APPLIES TO: Power BI Desktop Power BI service
This article provides a comprehensive and detailed exposition of all format settings available for the (new) Card visual in Power BI Desktop.
Serving as a reference guide, we've listed the multitude of customization options at your disposal, enabling you to tailor your data visualization to your specific needs. From layout enhancements, callout values, and reference labels, to advanced card settings, and image controls, we’ll cover every setting for (new) Card visual formatting.
Whether you’re a seasoned Power BI user or new to data visualization, if you're looking to understand all the format options available for the (new) Card visual, this guide has got you covered as you explore how to tailor the (new) Card visual to perfectly fit your needs.
Important
The (new) Card visual is currently in preview and only available for Power BI Desktop. This information relates to a prerelease product that may be substantially modified before it's released. Microsoft makes no warranties, expressed or implied, with respect to the information provided here.
To format and customize your column chart in Power BI Desktop, select the Format visual icon in the Visualizations Pane This grants access to the vast array of formatting options under the Visual and General tabs, enabling you to refine both appearance and functionality of your column charts to meet your specific needs.
With the ability to configure and display multiple cards in a single container, these settings provide comprehensive control over the layout and appearance of each card.
Choose from three options to establish how you want the layout arrangement to appear in your visual:
Two style options to customize the appearance of the visual:
Defines the maximum number of rows displayed, from 1-99, when selecting the Grid layout.
Defines the maximum number of columns displayed, from 1-99, when selecting the Grid layout.
Defines the maximum number of cards displayed, ranging from 1-99, and is accessible when using either the Single row or Single column arrangement.
This setting is available with the Grid arrangement, and after selecting the Cards style. When enabled, you can specify both the Space between rows, and the Space between columns.
Defines space between rows of 0-100 pixels. This setting is available after choosing Grid arrangement, with Cards style, and the Customize spacing toggle has been enabled.
Defines space between columns of 0-100 pixels. This setting is available after choosing Grid arrangement, with Cards style, and the Customize spacing toggle has been enabled.
Defines space between cards of 0-40 pixels. This setting is available after choosing Grid arrangement, with Cards style, and the Customize spacing toggle is not enabled.
The Shape settings let you customize the appearance of your visual by adjusting shape-related properties using the key options you can find in this section.
The Rounded corners setting lets you customize the corner curvature of your visual from 0 pixels (square corners) to 50 pixels (fully rounded) by using the slider or numerical input for more precise control towards achieving the desired look for your visual.
The Customize corners toggle lets you adjust the curvature of each individual corner of your visual. When this toggle is enabled, you can specify different radius values for the top-left, top-right, bottom-left, and bottom-right corners, providing even greater flexibility in designing unique and visually appealing shapes that align with your report's overall design.
This setting is accessible only when the Customize corners toggle is activated. It allows for the top left corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize corners toggle is activated. It allows for the top right corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize corners toggle is activated. It allows for the bottom left corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize corners toggle is activated. It allows for the bottom right corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
The Background toggle, when enabled, lets you customize the background of your visual to enhance appearance and readability.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Background image control lets you browse your device to add an image file that will be displayed in the background.
The Image fit setting offers three options as shown in the dropdown menu:
The Image transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Border and gridlines settings, only available when Layout style is set to Table, lets you customize the color, style, thickness, transparency, and rows shown, to enhance the visual's appearance and ensuring it aligns with your report's overall design.
The Customize lines toggle, when enabled, displays two groups of the same controls. The first group of controls applies the format settings to the Borders, and the second group of controls applies the format settings to the Gridlines. When toggled off, the format options are applied to both Borders and Gridlines together.
The menu provides three selections to customize the line style pattern:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Width setting allows you to define the thickness in pixels, offering a range from 0 (none) to 12 (widest).
The Overflow settings provide flexibility in displaying more cards that don't fit within the initial view. You can define settings to allow users to flip through paginated cards, or scroll continuously, either vertically or horizontally, to view all the data within the visual.
Choose between a Paginated or Continuous scroll overflow style:
This option lets you set the scroll direction to either Vertical or Horizontal, depending on how you want users to navigate through the overflowed cards.
The Padding settings allow you to adjust the space between the content of the card and its border on all sides of the card’s content to create a more balanced and visually appealing layout. Increasing the padding can give the content more breathing room, while decreasing it can make the content appear more compact.
The Padding controls let you specify the amount of padding space, from 0-40 pixels, on each side.
The Apply settings to feature enables you to configure formatting options globally across all series, or target them specifically. Certain formatting options are exclusive to the all series.
The dropdown menu becomes available when a data field is specified in the legend or when multiple fields are present on the y-axis. This feature ensures that users can apply the necessary settings to either all series or individual ones.
The visibility of Values can be toggled on or off to make them apparent or to hide them. When toggled on, you can access and adjust all the Values settings shown here.
The font’s appearance is determined by three distinct controls:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
This setting controls the horizontal alignment, allowing you to choose between left, center, or right. It’s accessible when using Row layout with Sentence style, or with Column layout arrangement.
This toggle, when enabled, allows text to automatically continue to the next line when it reaches the end of the current line within the space allocated. It’s important to what limits exist, even when this setting is enabled, as text can still be truncated in some instances.
The menu offers several options for defining the Display units:
The Format code setting, available only when selecting custom display units, allows you to customize the display format of values using custom format codes (based on Excel format codes) or apply conditional formatting. Format codes change how numbers, dates, and other data types are presented, such as formatting numbers as currency with $#,###M or dates as yyyy-MM-dd, ensuring your data is presented in a manner tailored to the specific needs of your visual.
Allows you to specify the number of decimal places for values, with a selectable range from 0 to 15.
This setting allows users to customize how blank or missing values are displayed in visualizations. When left blank, nothing is displayed however, users can specify custom text to represent blank values.
The Label toggle, when enabled, allows you to display labels for your callout values. You can customize the appearance of these labels in your visualizations, including options for changing the displayed text, label hierarchy, font, text size, color, and alignment of the labels, ensuring they precisely match the report.
The default text for the Label title is automatically derived from the name of the data field used. However, you can customize this title to a different text or you might decide to apply conditional formatting.
The dropdown menu allows you to select the hierarchical level of the label, with options ranging from Normal to Heading 2 through Heading 6, to organize content in a structured manner, providing a hierarchy for easy navigation and reading.
The font’s appearance is determined by three distinct controls:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The menu offers several options for defining the Display units:
With this dropdown menu, users have two options to specify the position of the label in relation to the data value:
This setting adjusts the space between the label and the data value from 0 to 40 pixels.
When enabled, and the Apply settings to is set to Series all, this toggle ensures that the horizontal alignment of all labels matches the alignment of the data values. When the toggle isn't enabled, the horizontal alignment options are available, allowing you to align the text to your liking.
This toggle ensures the baselines of the labels are aligned when displaying multiple series in a chart to maintain a uniform look across all labels. This feature is only available when All series is selected in the Apply settings to option.
The Layout section is designed to enhance the presentation of your data visualizations by offering settings for vertical alignment and callout size as shown here.
This setting controls the vertical alignment, allowing you to choose between top, middle, or bottom.
This setting allows you to establish the size, as a percentage of the card size, from 0% to 100%.
The Apply settings to feature enables you to configure formatting options globally across all series, or target them specifically. Certain formatting options are exclusive to the all series.
With the Apply setting to menu, you can select which series to customize. When All series is selected, you can customize Options, Title, Value, Detail, Divider, Background, Layout, and Spacing. When selecting an individual series, only the Title, Value, Detail, Divider, and Background menus are available enabling you to customize formatting for each series individually.
This button allows you to add labels to the selected Series by adding data fields from the Data pane. This Add label button is available when you have selected an individual series, but is deactivated when the Apply settings to is set for Series all.
After adding one or more labels to an individual Series, this menu allows you to customize Title, Value, Detail, Divider, and Background when All labels is selected. If selecting an individual label, only the Title, Value, and Detail menus are available enabling you to customize labels individually.
The Options menu is available when Apply settings to is set for All series.
With this dropdown menu, users have two options to specify the position of the Reference label:
The Title toggle, when enabled, controls the visibility of the Series title. When enabled, an array of settings becomes available, as shown, allowing users to fully adjust the appearance of the Series title.
With this dropdown menu, users can choose the Series name as the displayed title, or specify a Custom title and include an additional data field, as shown below.
The default text for the Label title is automatically derived from the name of the data field used. However, you have the option to customize this title to a different text or you may decide to apply conditional formatting. Keep in mind that this option is available for individual series and individual label.
The font’s appearance is determined by three distinct controls:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The font’s appearance is determined by three distinct controls:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The menu offers several options for defining the Display units:
The Format code setting, available only when selecting custom display units, allows you to customize the display format of values using custom format codes (based on Excel format codes) or apply conditional formatting. Format codes change how numbers, dates, and other data types are presented, such as formatting numbers as currency with $#,###M or dates as yyyy-MM-dd, ensuring your data is presented in a manner tailored to the specific needs of your visual.
Allows you to specify the number of decimal places for values, with a selectable range from 0 to 15, or use conditional formatting.
This setting allows users to customize how blank or missing values are displayed in visualizations. When left blank, nothing is displayed however, users can specify custom text to represent blank values.
The Detail toggle, when enabled, provides users the option to add and format more data to include detailed information in the Reference label when desired. The individual availability of each setting is dependent on which options have been selected for both series and labels.
Provides users the option to add an additional data field that will be displayed as detailed information.
The font’s appearance is determined by three distinct controls:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The menu offers several options for defining the Display units:
The Format code setting, available only when selecting custom display units, allows you to customize the display format of values using custom format codes (based on Excel format codes) or apply conditional formatting. Format codes change how numbers, dates, and other data types are presented, such as formatting numbers as currency with $#,###M or dates as yyyy-MM-dd, ensuring your data is presented in a manner tailored to the specific needs of your visual.
Allows you to specify the number of decimal places for values, with a selectable range from 0 to 15.
This setting allows users to customize how blank or missing values are displayed in visualizations. When left blank, nothing is displayed however, users can specify custom text to represent blank values.
The Divider toggle, when enabled, displays a customizable visual division between the Callout values and the Reference label, and also makes the Background toggle available for more customization options.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The menu provides three selections to customize the line style pattern:
The Width setting allows you to define the thickness in pixels, offering a range from 0 (none) to 12 (widest).
This toggle, when activated, ignores card padding to allow the Divider line to fill the entire span of the card.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
Using this menu, you can select either Rows or Columns as the Reference label layout.
Offering two style options, this setting allows you to choose either Tabular style or Sentence style.
In the Tabular style layout, you can adjust the data value display area from 0% to 100% to determine its proportion on the label.
This setting controls the horizontal alignment, allowing you to choose between left, center, or right.
This setting controls the vertical alignment, allowing you to choose between top, middle, or bottom. It’s applicable for both Tabular and Sentence styles in Row layout, and also when using the Column layout arrangement.
The Spacing menu provides options to adjust the layout and appearance of reference labels in a card visual. It allows you to customize the space between labels, divider line padding, and outer padding.
The setting allows you to define spacing of 0-20 pixels between labels for precise layout customization.
When enabled, this toggle allows you to customize the outer padding by specifying 0-20 pixels before, and after, the divider line.
This setting is accessible when the Customize outer padding toggle has been enabled, allowing for a padding range of 0-20 pixels before the divider line.
This setting is accessible when the Customize outer padding toggle has been enabled, allowing for a padding range of 0-20 pixels after the divider line.
The setting is accessible when the Customize outer padding toggle is off, allowing you specify 0-20 pixels for outer padding.
The Apply settings to feature enables you to configure formatting options globally across all series, or target them specifically. Certain formatting options are exclusive to the all series.
The dropdown menu becomes available when a data field is specified in the legend or when multiple fields are present on the y-axis. This feature ensures that users can apply the necessary settings to either all series or individual ones.
With this menu, you can choose to insert and image from your local files, or from an image URL, to accompany the data in your visual.
This feature opens file explorer on your computer for you to browse and select an image file.
Here you can specify an image URL, or use conditional formatting to insert an image.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
This menu provides four options to position the Image:
This setting controls the vertical alignment, allowing you to choose between top, middle, or bottom.
This setting adjusts the space between the image and the callout value from 0 to 30 pixels.
This toggle, when enabled, makes the Size option available where yuo can specify the pixel size of the image.
Define the image area size between 10% and 90% with this feature. When the Fix size toggle is enabled, this area size option changes to to a Size option where you can input the number of pixels instead.
With the Fix size toggle enabled, here you can define image pixel size, with Auto as the default, or selecting from 1-999 pixels.
You can enter a description that will be read by a screen reader upon selecting the visual.
The Apply settings to feature enables you to configure formatting options globally across all series, or target them specifically. Certain formatting options are exclusive to the all series.
The dropdown menu becomes available when a data field is specified in the legend or when multiple fields are present on the y-axis. This feature ensures that users can apply the necessary settings to either all series or individual ones.
The Shape menu provides a selection of shape options allowing you to tailor the style of your visual:
When the Rounded rectangle shape is chosen, the Rounded corners control appears, enabling the customization of corner curvature from 0 pixels (square corners) to 50 pixels (fully rounded).
When the Snipped tab, both top shape is selected, the Size of top snips control is activated, allowing you to clip the top corners from 0 pixels (square corners) to 50 pixels (maximum snip).
When the Snipped tab, both top shape is selected, the Size of bottom snips control is activated, allowing you to clip the bottom corners from 0 pixels (square corners) to 50 pixels (maximum snip).
This toggle, available exclusively for Rounded rectangle and Snipped tab, both top shapes, enables independent control of each corner's roundness or snip depth.
This setting is accessible only when the Customize style toggle is activated. It allows for the top left corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize style toggle is activated. It allows for the top right corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize style toggle is activated. It allows for the bottom left corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
This setting is accessible only when the Customize style toggle is activated. It allows for the bottom right corner of the shape to be rounded or snipped, adjustable from 0 pixels (square corner) to 50 pixels (fully rounded or snipped).
The Size dropdown menu offers four padding presets:
The Padding controls become available only when the Custom size option is selected, allowing for individual padding customization of each side of the shape.
The menu provides a suite of vertical alignment options for callout values and image, allowing them to be aligned as a group at the top, middle, or bottom of the container.
The Background toggle, when enabled, provides more options to customize the background of your cards.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Background image control lets you browse your device to add an image file that will be displayed in the background.
The Image fit setting offers three options as shown in the dropdown menu:
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Border toggle, when enabled, provides customization options to customize the borders and enhance the visual appeal of your cards.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Width setting allows you to define the thickness in pixels, offering a range from 1 to 10 (widest).
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Shadow toggle, when enabled, enhances the visual appeal of your cards by giving them a three-dimensional look and can help certain elements stand out in your report.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Offset dropdown allows you to choose either an inside offset creating the impression of depth, or being pressed, while an outside offset creates the impression of raised.
The Position dropdown menu allows you to set the direction of the effect to align with an assumed light source or your design preference, offering these options:
With this setting, you can customize the size of the shadow, offering a range of 0 to 10 pixels, to make it subtle or prominent.
Controls the sharpness of the edges, from a sharp outline to a soft haze.
Define the angle at which the effect appears, creating a sense of the time of day or a specific light source.
Set how far the shadow extends from the card, which can affect the perception of the card’s elevation.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Glow toggle, when enabled, enhances the visual appeal of your cards by giving them a luminous soft light effect around the cards and can help certain elements stand out in your report.
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
Adjusts the distance between the glow and the card to create the impression of depth.
The Position dropdown menu allows you to set the direction of the effect to align with an assumed light source or your design preference, offering these options:
With this setting, you can customize the size of the glow, offering a range of 0 to 10 pixels, to make it subtle or prominent.
Controls the sharpness of the edges, from a sharp outline to a soft haze.
Define the angle at which the effect appears, creating a sense of the time of day or a specific light source.
Set how far the shadow extends from the card, which can affect the perception of the card’s elevation.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Accent bar toggle, when enabled, is a simple yet effective way to draw attention to key metrics on your cards and providing more visual cues to highlight important information, using these settings.
This menu provides four options to position the Accent bar:
This setting allows you to customize the color by either selecting from the color palette or applying conditional formatting.
The Transparency setting allows you to adjust the transparency level, ranging from 0% for full opacity to 100% for complete transparency, enabling you to achieve either a subtle or a more pronounced effect.
The Width setting allows you to define the thickness in pixels, offering a range from 1 to 10 (widest).
Training
Module
How to build the User Interface in a canvas app in Power Apps - Training
In this module, learners will learn how to build UI for their app including theming, icons, images, personalization, form factors, and controls.