Versions Compared

Old Version 2

changes.mady.by.user Bharathi Manohar

Saved on

compared with

New Version 3

changes.mady.by.user Bharathi Manohar

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
excludeRelated Articles

Card

The Card directive lets allows you to render the data in the form of as a card component. This directive can be used for various purposes, besides Provider or Location cardsApart from Provider and Location cards, this directive may be used for a variety of applications. This could hold any HTML content within it.

This Card directive renders creates a layout primarily for that the User may use to render their display custom content on the Card. Unlike This Card directive, unlike the Bootstrap carousel or the Cardlist directive, this Card directive does not have predefined properties that control what is rendered has no preset parameters that regulate what is presented on the Card.

Sample

...

Snippet

...

Property

Description

"type": "card"

This property accepts card as the option to identify this directive as Card.

"items": [{
"content": {...},
"contentUrl": {...},
"detailView": {
"content": {...},
"contentUrl": {...},
}
],

The items property holds an Array of Card data and this is displayed on the Bot. Each Card object can have the below properties.

  • content

  • contentUrl

  • detailView

    • content

    • contentUrl

"content": {}

This property will hold the HTML content to render the main Card data.

Sample:
"content": `<h1> Card ${i+1} </h1> <img src='https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/' class='d-block w-100' alt='image'>`

"contentUrl": {}

This property is optional. This can be used to host the content in a template and we must specify the endpoint here. The card will render from that endpoint.

This property take priority over the content property. This is to render the main card.

Sample:

"contentUrl": "http://localhost:3030/oeapi/html"

"detailView": {
"content": {...},
"contentUrl": {...},

}

The property detailView defines the content for the Detail view of the Card.

The properties inside this, namely the content and contentUrl works like the same way defined for the main card.

"filterButton": false

The functionality for the Filter page is under development. Please have the property set to false until further change.

...