Customizing ChatCanvasCardView

Unlike the creation, response and summary views that are html, chat views are native views. To customize the chat card view, you will need to provide a json of the card layout as well as the values in the view. In the absence of a customized chat canvas card view, the default would be chat card view with the text of app title.

Views and their supported properties

Below are different types of sub-views/widgets along with their customizable properties. Few properties are marked with iOS indicating that they are applicable only on iOS (and will have no effect on android).

Container / View

  1. id (optional, but must be unique)
  2. visibleiOS
  3. type _(any of the sub-view types we are mentioning here)_
  4. margin / marginTop / marginRight / marginBottom / marginLeft
  5. padding / paddingTop / paddingRight / paddingBottom / paddingLeft
  6. width
  7. height
  8. weight _(%ratio of parent view's width/height in case of horizontal/vertical layouts respectively)_
  9. backgroundColor _(only hex code allowed here)_
  10. cornerRadius
  11. borderWidthiOS / borderColoriOS
  12. children _(array of sub-views)_
  13. layout _(vertical / horizontal � when unspecified, defaults to vertical)_
  14. verticalAlignment _(top / bottom / center / stretchiOS - how children will be aligned vertically)_
  15. horizontalAlignment _(left / right / center / spaceBetweeniOS / spaceAroundiOS) - how children will be aligned horizontally._
  16. initialHeightiOS � _an iOS only property used in the topmost container that is used to render the card before the accurate dimension is ascertained. It is strongly advised to use this property for a smoother experience!_

Text

  1. id (optional, but must be unique)
  2. visibleiOS
  3. type _(any of the sub-view types we are mentioning here)_
  4. margin / marginTop / marginRight / marginBottom / marginLeft
  5. padding / paddingTop / paddingRight / paddingBottom / paddingLeft
  6. width
  7. height
  8. weight _(%ratio of parent view's width/height in case of horizontal/vertical layouts respectively)_
  9. backgroundColor _(only hex code allowed here)_
  10. cornerRadius
  11. borderWidthiOS / borderColoriOS
  12. string
  13. fontSize _(font family is always System's default, to avoid rendering issues)_
  14. textColor _(only hex code allowed here)_
  15. ellipsizeMode _(head / middle / tail)_
  16. maxNumberOfLines _(0 for no limit, else text will be truncated as per ellipsizeMode)_

Image

  1. id (optional, but must be unique)
  2. visibleiOS
  3. type _(any of the sub-view types we are mentioning here)_
  4. margin / marginTop / marginRight / marginBottom / marginLeft
  5. padding / paddingTop / paddingRight / paddingBottom / paddingLeft
  6. width
  7. height
  8. weight _(%ratio of parent view's width/height in case of horizontal/vertical layouts respectively)_
  9. backgroundColor _(only hex code allowed here)_
  10. cornerRadius
  11. borderWidthiOS / borderColoriOS
  12. source
  13. contentMode _(aspectFit / aspectFill / stretch / repeatiOS)_

Binding data with views

  • Form
    • ${Form.title}
    • ${Form.expiry} - output is a date-time string
    • ${Form.questions}
    • ${Form.questions.length}
    • ${Form.questions[questionId].title}
    • ${Form.questions[questionId].options}
    • ${Form.questions[questionId].options.length}
    • ${Form.questions[questionId].options[optionId].text}
    • ${Form.questions[questionId].options[optionId].pictureUrl}
    • ${Form.properties}
    • ${Form.properties.length}
    • ${Form.properties[propertyName]}
    • ${Form.properties[propertyName].value}
    • ${Form.properties[propertyName].length} - for Array/Set type property
  • MyLatestResponse
    • ${MyLatestResponse.sendTime} - output is a date-time string
    • ${MyLatestResponse.questionToAnswerMap[questionId]}
  • Summary
    • ${Summary.totalResponseCount}
    • ${Summary.totalParticipantsCount}
    • ${Summary.targetResponderCount}

Also one can use these variables as placeholders, like:
"Thanks for your news report: ${Form.properties[newsDescription].value}"

Operations

In some scenarios, there may arise a need where different users may need to view different chat card, that may be based on some attributes. In order to enable such scenarios, Kaizala provides operators, that enables Action Creators to personalise chat card views for the same Action instance differently for different scenarios/users.

For example, you may choose to show a different card view for users who have not completed the job, and a different card view for users who have completed the job. This can be extended to any type of scenarios that may arise.

How to provide the json schema

In the manifest (package.json) file of a package put the JSON file name under sourceLocation key in ChatCanvasCardView Below is a sample snapshot from package.json:

snapshot of package.json

Example ChatCanvasCardView source file

{
    "schemaVersion": 1,
    "schema": {
        "type": "container",
        "initialHeight": 300,
        "layout": "vertical",
        "children": [
            {
                "type": "text",
                "paddingLeft": 10,
                "paddingRight": 10,
                "string": "${Form.properties[Property1].value}",
                "fontSize": 18,
                "fontStyle": "bold",
                "textColor": "#CE222E",
                "textAlignment": "left",
                "maxNumberOfLines": 2,
                "marginBottom": 10
            },
            {
                "type": "image",
                "height": 160,
                "source": "${Form.properties[CoverImageProperty].value}",
                "contentMode": "aspectFit",
                "backgroundColor": "#263749",
                "marginBottom": 10
            },
            {
                "type": "text",
                "paddingLeft": 10,
                "paddingRight": 10,
                "string": "${Form.properties[Property2].value}",
                "fontSize": 18,
                "fontStyle": "bold",
                "textColor": "#32495f",
                "textAlignment": "left",
                "maxNumberOfLines": 4,
                "marginBottom": 0
            }
        ]
    }
}