Last updated on August 04, 2017

Adding a card

This article provides the instructions to adding a card in the Library.

Appspace Supported cards are officially created by Appspace, and are available to all cloud users, while cards that are created by a third-party community developer are categorized as Community Cards, as follows:

  • Appspace Supported cards

    • Announcement card
    • Web View Card

  • Community cards

    • Data Table card
    • Donut Chart card
    • Facebook card
    • Line Chart card
    • RSS card
    • Google Slides card
    • Youtube card

Important

Community cards will be turned off by default. Contact us to learn more about our developer community.


Please take note of the following when adding a card:

  • The card title is also the name used when saving the card to the Library. Therefore this is a mandatory field.

  • The Text Editor is only displayed for each field when you click and type in the field (Title, Headline, Summary). It provides basic text editing capabilities such as Font Size, Font Style, Text Alignment, and Text Color.


  • You can add images to the card by browsing the library for existing content. You can also upload, or drag and drop an image directly into the image placeholder, from a folder in your computer.

    However, you may only upload one image to the image placeholder.


  • The Color Picker, enables color selection for text and backgrounds in the Card.


    The first two characters in the Hex Color Code are the Transparency value, while the next six characters are the Color values. Please be mindful when including a custom Hex color code.


Add a Card

Note

Prior to adding a card, please read the Introduction to cards article and check out the card types supported by your device.

  1. In Library, select the desired folder. Click the Upload button, and select Create Card.


  2. Select a card template and follow the instructions based on the selected card below:

    Appspace Supported Cards:


    Community Cards:



Announcement Card

  1. Fill in the Headline and Summary text to be displayed on the card. The Text Editor can be used to customize the text styles.


  2. The following card customization options can be done:

    • Upload a custom font, to be used in the Text Editor
    • Customize the card background color, image, or video.
    • Add an image, with image stretch options.
    • Add a logo.
    • Select the card layout, with additional customization options.

    Note

    The latest Announcement card template now supports video backgrounds (.mp4).


  3. Click Next.

  4. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.


Web View Card

  1. Fill in the desired website URL in the ‘Enter website URL’ field.


  2. Select one of the following the ‘Embed options’:

    • Native Webview - Displays the web page in the device’s browser without the ability to customize, as the web page is set as source and is not embedded.

    • XHR Proxy - Uses XMLHttpRequest (XHR) proxy to by-pass some browser security settings, to display websites that do not allow embedding.

    • Basic Authentication - Allows web pages with basic authentication using the XHR proxy method.

    • Iframe - Uses the most basic way to embed web pages, and only works if the web page allows embedding. It may not work for websites that disallow embedding, such as social media web sites.


  3. Additional customization options are available when ‘XHR Proxy’, or ‘Iframe’ is selected.

    • Select ‘Set website scaling’ to configure the following:
      • Fit to screen - Allows the web page to be displayed to match the screen resolution
      • Custom size - Allows the web page to be displayed at a custom resolution.
      • Custom size with crop - Allows a particular section of the web page to be displayed.

    • Select ‘More customization options’ to configure the following:

      • Disable interactivity - Prevents users from clicking or scrolling the web page on devices with touchscreen or mouse attached.

      • Display while loading - Displays the web page before it is fully loaded, with certain elements loaded after the web page is displayed.


    • Customize the card background color, or image.


Data Table Card

  1. Fill in the Headline and Summary text to be displayed on the card. The Text Editor can be used to customize the text styles.


  2. Click the Import Data button, and populate the card’s table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).


    Click Save when done.


  3. The following card customization options can be done:

    • Select the card layout.
    • Select the data table color palette.
    • Select the data table options.
    • Customize the Header and Table style.
    • Customize the table cell style.
    • Customize the card background color, or image.


  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.


Donut Chart Card

  1. Fill in the Headline and Summary text to be displayed on the card. The Text Editor can be used to customize the text styles.


  2. Click the Import Data button, and populate the cards table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).


    The Label column accepts text strings, and the Value column only accepts numeric values. Click Save when done.

    Note

    The chart only displays the largest eight slices, anything more is combined into one slice and labelled ‘Others’.

    Important

    When importing data from an Excel spreadsheet, the header columns must be titled as, “label” and “value”.


  3. The following card customization options can be done:

    • Select the card layout.
    • Select the chart options.
    • Add a caption inside the donut chart.
    • Select the chart color palette.
    • Customize the table style
    • Customize the chart legend style.
    • Upload a logo.
    • Customize the card background color, or image.

    Note

    Additional Table Style or Legend Style customizations, are only displayed when “Show Table”, or “Show Legend” is selected in the Chart Options.

  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.


Facebook Card

  1. Fill in the desired Facebook Page name (as displayed on the Facebook page), and click Validate. If the Facebook page displayed in the preview pane is incorrect, or an error appears, input the Facebook Page ID instead. You may visit http://findmyfbid.com/ to find the Facebook Page ID.


    The ‘Show access tokens’ option displays developer options.

    Note

    Facebook feeds appear with images by default. Images with less than 200px do not appear, and is replaced with the Facebook Page profile picture.

  2. The following card customization options can be done:

    • Upload a custom font.
    • Select the types of Facebook posts to be displayed.
    • Select the card layout.
    • Customize the layout items that is displayed.
    • Select the interval duration between Facebook posts
    • Customize the Facebook text style.
    • Customize the Facebook logo color.
    • Customize the Facebook footer.
    • Customize the card background color, or image.


  3. Click Next.

  4. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.


Line Chart Card

  1. Fill in the Headline and Summary text to be displayed on the card. The Text Editor can be used to customize the text styles.


  2. Click the Import Data button, and populate the cards table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).


    Data populated in rows represent the X Axis, and data populated in columns represent the Y Axis. Click Save when done.


  3. The following card customization options can be done:

    • Select the card layout.
    • Fill in the X and Y axis labels.
    • Select the line chart color palette.
    • Select the chart options.
    • Customize the chart legend style.
    • Customize the Axis label color.
    • Customize the card background color, or image.


    Note

    Additional Legend Style or Axis Label Color customizations, are only displayed when “Show Legend”, or “Show Axis” is selected in the Chart Options.

  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.


RSS Card

  1. Enter in the RSS feed URL in to the address field, and click Validate. If authentication is required, check the Requires authentication checkbox, and fill in the required credentials.


    Note

    Supported RSS formats: RSS 1.0, RSS 2.0, mRSS, Atom 1.0

  2. The following card customization options can be done:

    • Select the card layout.
    • Customize the RSS feed display.
    • Select the interval duration between RSS posts
    • Upload a customized RSS feed logo.
    • Customize the RSS text style.
    • Customize the card background color, or image.


  3. Click Next.

  4. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags, and even upload a custom thumbnail for the content.


Google Slides Card

  1. Enter in the Google Slides ID or URL link in to the address field.


  2. The following card customization options can be done:

    • Set the interval duration between slides.
    • Customize the playback behavior of the presentation.


  3. Click Next.

  4. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags, and even upload a custom thumbnail for the content.


Youtube Card

  1. Enter in the Youtube URL or playlist link in to the address field.


  2. The following card customization options can be done:

    • Set the maximum video resolution.
    • Customize the playback behavior of the video.


  3. Click Next.

  4. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags, and even upload a custom thumbnail for the content.