{"id":17974,"date":"2017-02-06T21:27:42","date_gmt":"2017-02-06T21:27:42","guid":{"rendered":"https:\/\/developer.kore.com\/?post_type=docs&p=10072"},"modified":"2021-03-19T08:36:34","modified_gmt":"2021-03-19T08:36:34","slug":"define-a-card-layout-with-actions-report","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v9-0\/docs\/bots\/bot-builder-tool\/action-info-task\/define-a-card-layout-with-actions-report\/","title":{"rendered":"Define a Card Layout with Actions Report"},"content":{"rendered":"
\r\n\t
\r\n\t\t
\r\n\t\t\t

With some tasks, you may want to add a link to a message sent to a user that contains data too large for a message, for example, a message with a picture, abstract, and a link to a full article or report. This topic describes how to define a card layout report that is also defined with action tasks.
\nThe card layout with action report type can be displayed to an end-user when the URL for this report type\u00a0is clicked in a\u00a0message. In the following illustration, the message sent to the end-user contains a link to the card layout\u00a0with actions report called View Items<\/span>. The message contains an abbreviated list of search results.
\n\"\"<\/a>
\nWhen the user clicks the link in the message, a card layout\u00a0with actions report is displayed with a detailed list of search results with a card\u00a0header, optional card\u00a0description, and a header row as shown in the following illustration for the View Items<\/em>\u00a0report as a list of selectable items to add to a shopping cart.
\n\"Report<\/a>
\nTo define a card layout\u00a0with actions report<\/strong>
\nTo complete the following procedure, you must have already defined a task, such as an alert task, or information task, that you want to add a card layout\u00a0with actions report\u00a0link to. Complete the steps in the following procedure to define a card layout\u00a0with actions report.<\/p>\n

    \n
  1. In Bot Builder, select the task for the Bot that you want to add a card layout\u00a0with actions report link to.\n

    Note:<\/strong> Only unpublished tasks can be modified.<\/p>\n<\/li>\n

  2. Click the Settings<\/strong> \u00a0icon, and then click Edit<\/strong>.<\/li>\n
  3. On the Bot Response<\/strong>\u00a0tab for the task that you want to add a card layout\u00a0with actions report to, click the Expand<\/strong>\u00a0 icon for the Report Template Definition<\/strong> section.<\/li>\n
  4. In the Link Title<\/strong>\u00a0field, enter the link text to display to the end-user in the task post, for example, View Items<\/span><\/em>.<\/li>\n
  5. In the Header<\/strong>\u00a0field, enter the\u00a0title of the report to display when the card layout\u00a0with actions report is displayed to the end-user, for example, Here are your items<\/em><\/span>.<\/li>\n
  6. In the Details<\/strong>\u00a0field, optionally enter any end-user help information displayed directly below the Header<\/strong> in the report, for example, Select your items and scroll to the bottom to add to your cart or a shopping list<\/span><\/em>.<\/li>\n
  7. In the Select Action<\/strong> drop-down list select one action to add to the report, and then click Add to possible actions list<\/strong>, and then repeat to add more actions as needed. Each added action is displayed in the Possible Actions<\/strong> field.<\/li>\n
  8. In the Template<\/strong> drop-down list, select Card Layout With Actions<\/strong>.<\/li>\n
  9. Click Edit Template<\/strong>. The Card Layout Configuration<\/strong>\u00a0dialog is displayed.<\/li>\n
  10. In the Card Title<\/strong> text area, enter your custom JavaScript to display the title\u00a0data\u00a0for your card, for example, a static title such as print(\"List of Items in Your Cart\");<\/code> or you can use payload keys, for example,\u00a0print(summary);<\/code><\/li>\n
  11. Click Add Item<\/strong>. The Item Configuration<\/strong> dialog is displayed as shown in the following illustration.
    \n<\/a>    \"Card<\/a><\/li>\n
  12. In the\u00a0Item\u00a0Name<\/strong> field, enter the first column title, for example, Name<\/span><\/em>.<\/li>\n
  13. In the \u00a0Data Type<\/strong>\u00a0field, select one of the following data types for the information displayed in the column:\n
      \n
    1. String<\/strong><\/li>\n
    2. Number<\/strong><\/li>\n
    3. Date<\/strong><\/li>\n<\/ol>\n<\/li>\n
    4. Enable\u00a0Is a link<\/strong> if the data in the column is a hyperlink. When enabled:\n
        \n
      1. In the Link Label<\/strong> field, enter the JavaScript to display the text for the link, for example, print(Name);<\/code> .<\/li>\n
      2. In the URL Value<\/strong> field, enter the JavaScript to display the data to output when the Link Label<\/strong> is clicked, for example,\u00a0print(\"https:\/\/login.salesforce.com\/\" + Id);<\/code><\/li>\n<\/ol>\n<\/li>\n
      3. If Is a link<\/strong> is not enabled, then\u00a0enter the JavaScript to display the value for the column in the Item Value<\/strong> text area, for example,\n
        var obj={};\r\nobj[\"title\"]=name;\r\nobj[\"value\"] = partNumber;\r\nobj = JSON.stringify(obj);\r\nobj = obj.replace(\/&quot;\/g,'\"');\r\nobj = obj.replace(\/&amp;\/g,'&');\r\nprint(obj);<\/pre>\n<\/li>\n
      4. In the Display it as an image<\/strong> section, select Yes<\/strong> if the column value is an image.<\/li>\n
      5. In the Display it as HTML<\/strong> section,\u00a0select Yes<\/strong> if the column value contains HTML content.<\/li>\n
      6. In the Action Payload Key Mapping<\/strong> field,\u00a0you can display a response key as a link by mapping an action response key, for example, partNumber<\/span><\/em>, to the Item Value<\/strong> field displayed\u00a0to the end-user as the item\u00a0Name<\/strong>\u00a0as shown in the previous illustration.<\/li>\n
      7. Click Done<\/strong>. The Card Layout\u00a0Configuration<\/strong> dialog is displayed with the new column added as shown in the following illustration.
        \n        \"Card<\/a><\/li>\n
      8. Repeat Steps 11 – 19 for each additional column in the report, click\u00a0Save<\/strong> to save the column configurations, and then click Close<\/strong>.<\/li>\n
      9. In the Report Template Definition<\/strong> section, click Save<\/strong> to save the\u00a0card layout with actions report.<\/li>\n<\/ol>\n
        The table is saved Successfully saved response data<\/em> message is displayed at the top of the page.<\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n
        <\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"With some tasks, you may want to add a link to a message sent to a user that contains data too large for a message, for example, a message with a picture, abstract, and a link to a full article or report. This topic describes how to define a card layout report that is also...","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-17974","post","type-post","status-publish","format-standard","hentry","category-action-info-task"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/posts\/17974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/comments?post=17974"}],"version-history":[{"count":2,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/posts\/17974\/revisions"}],"predecessor-version":[{"id":26718,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/posts\/17974\/revisions\/26718"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/media?parent=17974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/categories?post=17974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-0\/wp-json\/wp\/v2\/tags?post=17974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}