Add cards to a board

Options
ashley.marshall
ashley.marshall Member, ALL USERS Posts: 5 New Contributor
in Anaplan Community

Boards are made up entirely of cards, which can be rearranged and resized.

If you’re a page builder, you can add the following types of card:

Once you’ve created a card, you can save it as a template and reuse it on other pages in the same app.

Learn about the different types of card.

On this page

Add a text card

Use a text card to add text to a board.

This is useful for guiding end users if they require further information to contextualize their data. For example, you could explain the relationship between the cards on a board.

To add a text card:

  1. Open the board in designer mode.

  2. In the Add card section of the side panel, double-click the Text tile, or drag it onto the board.

    By default, the card will display, full-width, at the top of the board.

    Text-card-designer.png

Configure a text card

To configure a text card:

  1. On the text card, click Configure text. 
    The Card designer dialog displays. 
  2. Enter a title in the Title field. 
    The title will display on the top left of the card.
  3. Optionally, enter a description in the Description field. 
    The description displays in a tooltip when the user hovers their mouse pointer over the i icon in the top left corner of the card.
  4. Optionally, select a link to a page from the Link to a page dropdown list.

Adding text and formatting a text card

  1. Overwrite the placeholder in the card preview that reads Enter your text here.
  2. Select a text style from the Text style dropdown list to format your text as: Heading 1, Heading 2, Heading 3, Normal, or Instructions. 
  3. Optionally, select how you want to align the text from the Text alignment dropdown list. 
  4. Optionally, select which color you want the text to be from the Text color dropdown list.
  5. Optionally, to display the card background or to remove it, toggle Display card background in Background. If you remove the background, you only see the text, and the tooltip if you move your cursor to the top left of the card.
  6. Click Publish.

Add a grid card

Use a grid card to display data from a module in a table.

This is useful for highlighting any important numerical data which you want end users to consume.

To add a grid card:

  1. Open the board in designer mode.

  2. In the Add card section of the side panel, double-click the Grid tile, or drag it onto the board.

    By default, the card will display, full width, at the top of the board.

  3. Click Configure grid on the grid card.

    The Card designer dialog displays, with modules listed alphabetically in the left panel.

    By default, the first module's saved views are displayed.

    Click a module's name to display the saved views for it.

    Grid-card-designer.png

  4. Choose the module view to display, and click Next.

    Use the Find field to search for the view.

  5. Optionally, configure a:

  • Title — this will display above the card. Avoid emojis, icons, or any other special characters in titles, as they may render inconsistently across browsers, and make text unreadable.
  • Description — if you enter text here, a blue 'i' icon displays on the published card. If a user hovers over this icon, the description text is displayed as a tooltip.
  • Link to a page — when a user clicks the card, they will be taken to the page you specify.
  • Optionally, use the Permit editing toggle to enable end users to edit values. By default, end users cannot edit the values in a grid card on a board.permit_editing_on_a_worksheet.png
  • Click Add when you’re happy with the information you’ve entered.

  • Click Publish.

    • Add a chart card

    Use a chart card to display data in a chart.

    This is useful for creating visualizations of data sets, so that end users can quickly compare the relative sizes of data items.

    You can create the following types of chart:

    To add a chart card:

    1. Open the board in designer mode.

    2. In the Add card section of the side panel, double-click the Chart tile, or drag it onto the board.

      By default, the card will display, full-width, at the top of the board.

    3. Click Configure chart on the chart card.

      The Card designer dialog displays, with modules listed alphabetically in the left panel.

      By default, the first module's saved views are displayed.

      Click a module's name to display the saved views for it.Screen Shot 2019-01-07 at 15.18.34.png

    4. Choose the saved module view that contains the data you want to display, and click Next.

      Use the Find field to search for a view.

    5. Optionally, configure a:

    • Title — this will display above the card. Avoid emojis, icons, or any other special characters in titles, as they may render inconsistently across browsers, and make text unreadable.
    • Description — if you enter text here, a blue 'i' icon displays on the published card. If a user hovers over this icon, the description text is displayed as a tooltip.
    • Link to a page — when a user clicks the card, they will be taken to the page you specify.

  • From the Chart type dropdown menu, choose the type of chart you want to create.

  • Choose how you want the chart to look.

    You'll see different options depending on the chart type you've chosen.
    • Series — choose how you want each series on the chart to display. A series is a set of data, which would be represented by a line on a line chart, or a set of columns on a column chart. You can choose the colour for each series, and if you are creating a combination chart, the chart type.
      If you create a combination chart, with two or more series as a column or area chart, it activates the Column stacking dropdown. This contains the following options for presenting your data. Choose:
      • Clustered, to stack the data items for a series within parallel columns. This is useful for quickly seeing which values are highest and lowest within a series. If used with an area chart, this will display translucent, overlapping area charts.
      • Stacked, to stack the data items for a series within one column, bar or area. This is useful for seeing differences between values at a glance.
      • Percentage, to stack the data items for a series within one column, bar or area, with the size of each data item determined by the percentage it represents within the 0-100 scale on the y-axis.  This is useful for understanding the composition of a value.
    • Axis — enter some optional text to display next to the vertical or horizontal axis. You can’t display axis information on a pie chart.
    • Labels — choose where you want the legend to display, and whether you want data labels on or off. Data labels help end users to identify the actual values that points on the chart represent.

  • Click Add when you’re happy with the information you’ve entered.

  • Click Publish.

    • Add a KPI card

    Use a KPI card to display a single value from a module cell.

    This is useful if you want to emphasize a particular value, for example, the total units sold within a specific timeframe.

    The value displayed is the first value in the module — the value in the top left-hand corner of the grid.

    To add a KPI card:

    1. Open the board in designer mode.

    2. In the Add card section of the side panel, double-click the KPI tile, or drag it onto the board.

      By default, the card will display, full width, at the top of the board.

    3. Click Configure KPI on the KPI card.

      The Card designer dialog displays, with modules listed alphabetically in the left panel.

      By default, the module at the top will display its views for you to select from.

      To display the views for any module, click the arrow beside it.Screen Shot 2019-01-07 at 15.18.34.png

    4. Choose the module view which contains the value you want to display, and click Next.

      Use the Find field to search for a view.

    5. From the Text style dropdown, choose a text style.

      A preview of the card displays on the right of the screen, and updates as you make changes.

    6. Optionally, configure a:

      • Title — this will display above the card. Avoid emojis, icons, or any other special characters in titles, as they may render inconsistently across browsers, and make text unreadable.
      • Description — if you enter text here, a blue 'i' icon displays on the published card. If a user hovers over this icon, the description text is displayed as a tooltip.
      • Link to a page — when a user clicks the card, they will be taken to the page you specify.

    7. Click Add when you're happy with the information you've entered.

    8. Click Publish.

    Add an image card

    Image cards are especially useful for helping users see a visual identifier of an item. For example, you can use an image to identify office locations, products, or different employees in your company.

    You can include multiple image cards on a board.

    There are two steps in the process to add an image card: first, get your data ready; then, publish your image card.

    download-1.png

    Image cards reference URLs stored in a line item in Classic Anaplan. To find out how to create the line item in Classic Anaplan, see Add Images to Dashboards.

    Get your data ready

    1. Open the board in designer mode.

    2. In the Cards panel, under Add card, double-click the Image tile, or drag it onto the board.
      By default, the card will display, full width, on the board.

    3. Click Configure image on the image card.

      The Card designer dialog displays, with modules listed in the left panel.

      By default, the view at the top will display its line items for you to select from.

      You can click the arrow beside any view to see its line items. download-2.png

    4. Choose the view you saved in Classic Anaplan that contains the URLs of the images to display.

      You can use the Find field if you need to search for a view.

    5. Select a line item.

      The image and the Image URL display in Card designer. The display updates if you change your selection.

      If you have more than one URL linked to a line item, a context selector will display on the top right corner of the preview panel. The context selector shows the display names. Card designer will show a notification message if you select a display name that is not linked to an image URL.

    6. Click Next to choose your publication settings.

    Publish your image card

    1. Optionally, configure the following options:
      • Title — this will display above the card. Avoid icons, emojis, or any other special characters in titles, as they may render inconsistently across browsers, and make text unreadable.
      • Description — if you enter text here, a blue 'i' icon displays on the published card. If a user hovers over this icon, the description text is displayed as a tooltip.
      • Link to a page —when a user clicks the card, they will be taken to the page you specify.
    2. To configure a context selector on an image card, click the cog wheel next to it. You can choose one of these options:

      • sync the selector with a page

      • select an option from Show on card. The options offer different ways to display the context selector on an image card:

      Off: the context selector doesn't display on the card.

      Label: choose an option from the context selector as the image card label.

      Selector: includes the context selector in the image card.

    3. Click Add to add the image card to the board.

      You can drag and drop the image card to where you want it placed on the board.

    4. Click Publish when you're happy with the information you've entered to publish your board.






    Add an action card

    Use an action card to create a process for users to complete.

    To create an action card, your model must have items grouped into action types. The action types are imports, exports, and processes. A task is a series of actions that complete a data process.

    For example, an action card might contain the steps a user needs to follow to complete a business process. The process involves the import of sales data into a model from a point of sale system.
    You need to import data and then process it so that the data appears in modules. This requires two action buttons; one to import and one to process the data. As a page builder, you create two action buttons, called Import sales data, and Process sales data. Users click the Import sales data button to complete the import and then click the Process sales data button to process the data to display instantly on the board.

    To add an action card:

    1. Open the board designer mode.
    2. In the Cards panel, under Add card, double-click the Action tile, or drag it onto the board.
      By default, the card will display, full width, on the board.
    3. Click Configure action on the action card.
      The Card designer dialog displays.Image of how you configure an action card on a board.png
    4. Optionally, in the left panel, enter a title in the Title bar.
    5. Optionally, write a description in the Description field and select an option from the Link to a page drop-down list.
    6. Under Select actions, choose the action item you want to display first on the action card. Expand any drop-down lists, to choose an item, and switch the toggle alongside the item to green.
    7. Repeat step 6 if you want to add another action item to the action card.
      The items will display on the card in the order you select them. If you have many actions on a card, you can scroll down the card to see each action.
    8. Optionally, to reorder the action items in the action card, hover your cursor over the top middle of each item and use the drag handle to relocate the card. 
    9. Click Publish.

    Publishing an Action card

    Once you are happy with your action card, click Publish.
    Your card will display on your published board.

    Edit a card

    Edit a card to change its source module view, and any of its properties.

    To edit a card:

    1. Open the board, in designer mode.

    2. Hover over the card you want to edit, and click the pencil icon in the top right-hand corner.

    The Card designer dialog displays. For detailed information about what you can change for each card type, see:

    Remove a card

    Removing a card from a page doesn’t remove it from the card template library.

    To remove a card:

    1. Open the board, in designer mode.

    2. Hover over the card you want to remove, and click the ellipsis (…) in the top right-hand corner.

    3. Click Delete.

    4. Click Publish to update the board with your changes.

    Save a card to the template library

    You can save a card that's been added to the board as a template, so that it can be used on other pages.

    Cards can only be used within the app in which they were created.

    To save a card to the card template library:

    1. Open, in designer mode, the board which contains the card you want to save.

    2. Hover over the card you want to save, and click the ellipsis (...).

    3. Click Save card as template. The Save card as template dialog is displayed.

    4. In the Name field, enter a name for the card template.

      Avoid icons, emojis, or any other special characters in names, as they may render inconsistently, and make text unreadable.

    5. Click Save.

    6. Click Publish to update the board with your changes.






    Categories