{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"exclude":{"value":"Related Articles"}},"macroMetadata":{"macroId":{"value":"e96ad1fa-c5a9-410a-94ac-11abe847ca64"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"708ae96e-6179-4b8a-b284-00f20f031394"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Card","type":"text"}]},{"type":"paragraph","content":[{"text":"The Card directive allows you to render data as a card component. Apart from Provider and Location cards, this directive may be used for a variety of applications. This could hold any HTML content within it. ","type":"text"}]},{"type":"paragraph","content":[{"text":"This Card directive creates a layout that the User may use to display custom content on the Card. This Card directive, unlike the Bootstrap carousel or the Cardlist directive, has no preset parameters that regulate what is presented on the Card.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sample","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":592,"id":"54e6899e-68c8-4b6c-94b9-ef05dd6a7050","collection":"contentId-2256568321","type":"file","height":415}},{"type":"caption","content":[{"text":"Sample use cases for Card directive","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Snippet","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"{\n \"type\": \"card\",\n \"items\": [{\n \"title\": \"Card Detail title\",\n \"imageURL\": \"example.com/hospitalone\", //optional\n \"body\": \"A sample description of the Hospital and its services\",\n \"button\": \"Check more details\", //optional\n \"html\": \"

provide the full HTML data

\", // optional\n \"detailDisplay\": [{\n \"type\": \"Accordion\",\n \"items\": [{\n \"title\": \"Accordion One\",\n \"body\": `

Lorem Ipsum is simply dummy text

`\n }, {\n \"title\": \"Accordion Two\",\n \"body\": `

Lorem Ipsum is simply dummy text

`\n }]\n }]\n }\n },\n {\n \"title\": \"Card Detail title\",\n \"imageURL\": \"\", //optional\n \"body\": \"\",\n \"button\": \"\", //optional\n \"html\": \"\", // optional\n \"detailDisplay\": [{\n \"type\": \"Accordion\",\n \"items\": [{\n \"title\": \"Accordion three\",\n \"body\": `

Lorem Ipsum is simply dummy text

`\n }, {\n \"title\": \"Accordion four\",\n \"body\": `

Lorem Ipsum is simply dummy text

`\n }]\n }]\n }\n}],\n\"filterButton\": false\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Please add the above snippet in the ","type":"text"},{"text":"Chatbot Settings","type":"text","marks":[{"type":"em"}]},{"text":" under the ","type":"text"},{"text":"directive","type":"text","marks":[{"type":"code"}]},{"text":" object or use the Function node in the Experience Designer to construct the ","type":"text"},{"text":"msg.payload.orbita.directive","type":"text","marks":[{"type":"code"}]},{"text":" to prepare the Directive data. The latter takes priority over the former method. ","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"The Card directive can be used to display a single card. We can make a Carousel using this directive by adding more Card objects to the Array. ","type":"text"}]},{"type":"paragraph"},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"The Card component will render only one card item with navigation arrows, irrespective of the page screen width. User can use the buttons to navigate to other cards.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Parameters used for Carousel","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"f04f7bce-d70f-47a7-82b5-49a189563c32"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"Property","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"type\": \"card\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"This property accepts ","type":"text"},{"text":"card ","type":"text","marks":[{"type":"code"}]},{"text":"as the option to identify this directive as Card. ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"items\": [{","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"title\": \"\",","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"imageURL\": \"\", // optional","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"body\": \"\",","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"button\": \"\", // optional","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"html\": \"\", // optional","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"}]","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"items ","type":"text","marks":[{"type":"em"}]},{"text":"property holds an Array of Card data and this is displayed on the Bot. Each Card object can have the below properties. The properties are tied to default CSS styles.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code"}]},{"text":" - Title for the Card to be given here","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"imageURL","type":"text","marks":[{"type":"code"}]},{"text":" - An Image URL should be provided here","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"body","type":"text","marks":[{"type":"code"}]},{"text":"- The main body for the Card to be provided. It will use default styling on the Card","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"button","type":"text","marks":[{"type":"code"}]},{"text":"- Action item can be given here.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"html","type":"text","marks":[{"type":"code"}]},{"text":"- This property holds the full Card content in HTML format. This property takes priority over other properties above.","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"detailView\": {","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"content\": {...}","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"}","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"The property ","type":"text"},{"text":"detailView","type":"text","marks":[{"type":"code"}]},{"text":" defines the content for the Detail view of the Card. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The properties inside this, namely the ","type":"text"},{"text":"content","type":"text","marks":[{"type":"code"}]},{"text":" works the same way defined for the main card. ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"filterButton\": false","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"The functionality for the Filter page is under development. Please have the property set to false until further change. ","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Accordion","type":"text"}]},{"type":"paragraph","content":[{"text":"The Accordion component can be added as part of the Card’s detailed view. This is optional and will help render the accordion content.","type":"text"}]},{"type":"paragraph","content":[{"text":"The snippet used to explain the Card has the sample for the Accordion also. ","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":366,"id":"3a20ee4e-a45b-4c99-88a8-677bd802ff24","collection":"contentId-2256568321","type":"file","height":583}}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Snippet","type":"text"}]},{"type":"paragraph","content":[{"text":"The below snippet is to highlight the Accordion component alone. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"\"detailDisplay\": [{\n\t\t\t\t\t\"type\": \"Accordion\",\n \"method\" : \"flush\",\t\t\t\t\t\n \"items\": [{\n\t\t\t\t\t\t\t\"title\": \"Accordion three\",\n\t\t\t\t\t\t\t\"body\": `

Lorem Ipsum is simply dummy text

`\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"title\": \"Accordion four\",\n\t\t\t\t\t\t\t\"body\": `

Lorem Ipsum is simply dummy text

`\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}]","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Please add the above snippet in the ","type":"text"},{"text":"Chatbot Settings","type":"text","marks":[{"type":"em"}]},{"text":" under the card directive object or use the Function node in the Experience Designer to construct the ","type":"text"},{"text":"msg.payload.orbita.directive","type":"text","marks":[{"type":"code"}]},{"text":" to prepare the Directive data. The latter takes priority over the former method. We can add an array of Accordion content inside the ","type":"text"},{"text":"items","type":"text","marks":[{"type":"code"}]},{"text":" object as required. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Parameters used for Carousel","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"bc215dd4-c439-4906-b7fa-f2583891e511"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"Property","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"type\": \"Accordion\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"This property accepts ","type":"text"},{"text":"Accordion","type":"text","marks":[{"type":"code"}]},{"text":" as the option to identify this as the Accordion component inside the Card detail page overlay in the ","type":"text"},{"text":"detailDisplay","type":"text","marks":[{"type":"code"}]},{"text":" object.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"method\" : \"flush\"","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"This property accepts values","type":"text"},{"text":" \"flush\" ","type":"text","marks":[{"type":"code"}]},{"text":"or ","type":"text"},{"text":"\"Always-open\"","type":"text","marks":[{"type":"code"}]},{"text":". This controls the Accordion design type as either Flush design or Collapse/ Expand design. ","type":"text"},{"type":"hardBreak"},{"text":"To experience the difference, please visit ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://getbootstrap.com/docs/5.0/components/accordion/"}},{"text":" ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"items\": [{","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"title\": {...},","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"body\": {...}","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"}]","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"items ","type":"text","marks":[{"type":"em"}]},{"text":"property holds an Array of Accordion data and this is displayed on the detailed page. The ","type":"text"},{"text":"items","type":"text","marks":[{"type":"code"}]},{"text":" array can have the below properties.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"title","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"body","type":"text"}]}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Tabs","type":"text"}]},{"type":"paragraph","content":[{"text":"The Tabs component can be added as part of the Card directive’s detailed view. This component is optional and will help render the Tabs content. The component is tightly coupled with the Card directive detail page. ","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":50.0},"content":[{"type":"media","attrs":{"width":519,"id":"174367c9-b02e-438d-a150-237b7ef2d5dc","collection":"contentId-2256568321","type":"file","height":593}},{"type":"caption","content":[{"text":"Tab component","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Snippet","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"The below snippet is to highlight the Tab component along with the Accordion component. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n\t\"type\": \"card\",\n\t\"items\": [{\n\t\t\"content\": `

Card component Two

`,\n\t\t\"detailView\": {\n\t\t\t\"title\": \"Card Detail title\",\n\t\t\t\"content\": `

Card detail view ${i+1}

`,\n\t\t\t\"detailDisplay\": [{\n type: \"Tab\",\n items: [{\n title: \"Tab one\",\n content: \"

sample tab one

\",\n },\n {\n title: \"Tab two\",\n content: \"

sample tab two

\"\n }]\n },{\n\t\t\t\t\t\"type\": \"Accordion\",\n\t\t\t\t\t\"items\": [{\n\t\t\t\t\t\t\"title\": \"Accordion three\",\n\t\t\t\t\t\t\"body\": `

Lorem Ipsum is simply dummy text

`\n\t\t\t\t\t}]\n\t\t\t\t}\t\t\t\t\n\t\t\t]\n\t\t}\n\t}],\n\t\"filterButton\": false\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Please add the above snippet in the ","type":"text"},{"text":"Chatbot Settings","type":"text","marks":[{"type":"em"}]},{"text":" under the card directive object or use the Function node in the Experience Designer to construct the ","type":"text"},{"text":"msg.payload.orbita.directive","type":"text","marks":[{"type":"code"}]},{"text":" to prepare the Directive data. The latter takes priority over the former method. We can add an array of Tab content inside the ","type":"text"},{"text":"items","type":"text","marks":[{"type":"code"}]},{"text":" object as required. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Parameters used for Carousel","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"dedfcd0a-439c-4ccd-9330-68cd1f3de557"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"Property","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"type\": \"Tab\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"This property accepts ","type":"text"},{"text":"Tab","type":"text","marks":[{"type":"code"}]},{"text":" as the option to identify this as the Tab component inside the Card detail page overlay in the ","type":"text"},{"text":"detailDisplay","type":"text","marks":[{"type":"code"}]},{"text":" object.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[300.0]},"content":[{"type":"paragraph","content":[{"text":"\"items\": [{","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"title\": {...},","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"\"content\": {...}","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"}]","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[459.0]},"content":[{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"items ","type":"text","marks":[{"type":"em"}]},{"text":"property holds an Array of Tab data and this is displayed on the detailed page. The ","type":"text"},{"text":"items","type":"text","marks":[{"type":"code"}]},{"text":" array can have the below properties.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"title","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"content","type":"text"}]}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Related Articles","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"contentbylabel","parameters":{"macroParams":{"showLabels":{"value":"false"},"max":{"value":"5"},"showSpace":{"value":"false"},"cql":{"value":"label = \"directive\""}},"macroMetadata":{"macroId":{"value":"05f143b8-c04a-4d7b-a2af-7a14f42d656e"},"schemaVersion":{"value":"4"},"title":"Content by Label"}},"localId":"1aceaee3-c0a0-49b5-ac12-1a45d1431a0c"}}],"version":1}

Browser not supported