{"id":17972,"date":"2017-02-06T17:16:25","date_gmt":"2017-02-06T17:16:25","guid":{"rendered":"https:\/\/developer.kore.com\/?post_type=docs&p=10056"},"modified":"2021-03-19T08:39:19","modified_gmt":"2021-03-19T08:39:19","slug":"defining-a-card-layout-report","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v9-1\/docs\/bots\/bot-builder-tool\/dialog-task\/defining-a-card-layout-report\/","title":{"rendered":"Defining a Card Layout 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, an message with a picture, abstract, and a link to a full article or report. This topic describes how to define a card layout\u00a0report.
\nThe card layout\u00a0report 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\u00a0report called Today’s Summary<\/span>.
\n\"DIYBotBuilderAlertReportTasksCardLayoutAlert\"
\nWhen the user clicks the link in the message, a card layout\u00a0report with a card\u00a0header, optional card\u00a0description, and a header row as shown in the following illustration for the Today’s Summary<\/em>\u00a0report.
\n\"DIYBotBuilderAlertReportTasksCardLayoutAlertClicked\"
\nTo define a card layout 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\u00a0report link to. Complete the steps in the following procedure to define a card layout\u00a0report.<\/p>\n

    \n
  1. In Bot Builder, select the task for the Bot that you want to add a card layout report link to.
    \nNote:<\/strong> Only unpublished tasks can be modified.<\/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\u00a0report 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, Today’s Summary<\/span><\/em>.<\/li>\n
  5. In the Header<\/strong>\u00a0field, enter the\u00a0title of the report to display when the card layout\u00a0report is displayed to the end-user.<\/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, These are the details for Today’s Summary Card Layout Report<\/span><\/em>.<\/li>\n
  7. In the Template<\/strong> drop-down list, select Card layout<\/strong>.<\/li>\n
  8. Click Edit Template<\/strong>. The Card Layout Configuration<\/strong>\u00a0dialog is displayed.<\/li>\n
  9. 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(\"Today's Summary Report\");<\/code> or you can use payload keys, for example,\u00a0print(summary);<\/code><\/li>\n
  10. Click Add Item<\/strong>. The Item Configuration<\/strong> dialog is displayed as shown in the following illustration.
    \n<\/a>    \"Card<\/a>
    \n<\/a><\/li>\n
  11. In the\u00a0Item\u00a0Name<\/strong> field, enter the first column title, for example, Task<\/span><\/em>.<\/li>\n
  12. 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 the Item Value<\/strong> field, for example,\n
        if(typeof(start.dateTime) !== 'undefined'){\r\n    if((new Date(end.dateTime).getTime()-new Date(start.dateTime).getTime())\/(60*60*1000) >24){\r\n\t\tprint('\\\\dt(' + new Date(start.dateTime).toISOString() + ',\\'ddd., MMM. dd, yyyy hh:mm a\\')');\r\n        print(\" - \")\r\n        print('\\\\dt(' + new Date(end.dateTime).toISOString() + ',\\'ddd., MMM. dd, yyyy hh:mm a\\')');\r\n\t} else {\r\n       print('\\\\dt(' + new Date(start.dateTime).toISOString() + ',\\'ddd., MMM. dd, yyyy hh:mm a\\')');\r\n       print(\" - \")\r\n       print('\\\\dt(' + new Date(end.dateTime).toISOString() + ',\\'hh:mm a\\')');\r\n\t}\r\n} else {\r\n  print('\\\\dt('+new Date(start.date).toISOString()+',\\'MMM DD\\')');\r\n}<\/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. 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
      7. Repeat Steps 10 – 17\u00a0for each additional column in the report, click\u00a0Save<\/strong> to save the column configurations, and then click Close<\/strong>.<\/li>\n
      8. In the Report Template Definition<\/strong> section, click Save<\/strong> to save the card layout\u00a0report.<\/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, an message with a picture, abstract, and a link to a full article or report. This topic describes how to define a card layout\u00a0report. The card layout\u00a0report type...","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-17972","post","type-post","status-publish","format-standard","hentry","category-dialog-task"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/17972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/comments?post=17972"}],"version-history":[{"count":1,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/17972\/revisions"}],"predecessor-version":[{"id":20719,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/17972\/revisions\/20719"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/media?parent=17972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/categories?post=17972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/tags?post=17972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}