Personalizando o ChatCanvasCardView

Artigo
04/04/2023

Ao contrário das exibições de criação, resposta e resumo que são html, as exibições de chat são exibições nativas. Para personalizar a exibição do cartão de chat, você precisará fornecer um json do layout do cartão, bem como os valores no modo de exibição. Na ausência de uma exibição personalizada do cartão de tela de chat, o padrão seria a exibição do cartão de chat com o texto do título do aplicativo.

Exibições e suas propriedades com suporte

Abaixo estão diferentes tipos de sub-exibições/widgets junto com suas propriedades personalizáveis. Poucas propriedades são marcadas com ^{o iOS} indicando que elas são aplicáveis apenas no iOS (e não terão efeito no android).

Contêiner/Exibição

id (opcional, mas deve ser exclusivo)
^iOS visível
type _(qualquer um dos tipos de subexibição que estamos mencionando aqui)_
margin / marginTop / marginRight / marginBottom / marginLeft
preenchimento /paddingTop / paddingRight / paddingBottom / paddingLeft
width
height
peso _(%ratio da largura/altura da exibição pai no caso de layouts horizontais/verticais, respectivamente)_
backgroundColor _(somente código hex permitido aqui)_
Cornerradius
borderWidthiOS /borderColoriOS
children _(matriz de sub-exibições)_
layout _(vertical /horizontal quando não especificado, padrão para vertical)_
verticalAlignment _(superior / inferior / centro / stretchiOS - como as crianças serão alinhadas verticalmente)_
horizontalAlignment _(esquerda / direita / centro / spaceBetween^iOS / spaceAround^iOS) - como as crianças serão alinhadas horizontally._
initialHeight^iOS _an propriedade iOS usada apenas no contêiner mais alto que é usado para renderizar o cartão antes que a dimensão precisa seja apurada. É altamente recomendável usar essa propriedade para uma experiência mais suave!_

Texto

id (opcional, mas deve ser exclusivo)
^iOS visível
type _(qualquer um dos tipos de subexibição que estamos mencionando aqui)_
margin / marginTop / marginRight / marginBottom / marginLeft
preenchimento /paddingTop / paddingRight / paddingBottom / paddingLeft
width
height
peso _(%ratio da largura/altura da exibição pai no caso de layouts horizontais/verticais, respectivamente)_
backgroundColor _(somente código hex permitido aqui)_
Cornerradius
borderWidthiOS /borderColoriOS
string
fontSize _(família de fontes é sempre o padrão do Sistema, para evitar problemas de renderização)_
textColor _(somente código hex permitido aqui)_
ellipsizeMode _(cabeça/meio/cauda)_
maxNumberOfLines _(0 para nenhum limite, outro texto será truncado de acordo com a reticênciaMode)_

Image

id (opcional, mas deve ser exclusivo)
^iOS visível
type _(qualquer um dos tipos de subexibição que estamos mencionando aqui)_
margin / marginTop / marginRight / marginBottom / marginLeft
preenchimento /paddingTop / paddingRight / paddingBottom / paddingLeft
width
height
peso _(%ratio da largura/altura da exibição pai no caso de layouts horizontais/verticais, respectivamente)_
backgroundColor _(somente código hex permitido aqui)_
Cornerradius
borderWidthiOS /borderColoriOS
source
contentMode _(aspectFit / aspectFill / stretch / repeat^iOS)_

Associar dados com exibições

Form
- ${Form.title}
- ${Form.expiray} - a saída é uma cadeia de caracteres de data e hora
- ${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} - para propriedade Array/Set type
MyLatestResponse
- ${MyLatestResponse.sendTime} - a saída é uma cadeia de caracteres de data e hora
- ${MyLatestResponse.questionToAnswerMap[questionId]}
Resumo
- ${Summary.totalResponseCount}
- ${Summary.totalParticipantsCount}
- ${Summary.targetResponderCount}

Também é possível usar essas variáveis como espaços reservados, como:
"Obrigado por sua reportagem: ${Form.properties[newsDescription].value}"

Operações

Em alguns cenários, pode surgir uma necessidade em que diferentes usuários possam precisar exibir um cartão de chat diferente, que pode ser baseado em alguns atributos. Para habilitar esses cenários, o Kaizala fornece operadores que permitem aos Criadores de Ações personalizar exibições de cartão de chat para a mesma instância de ação de forma diferente para diferentes cenários/usuários.

Por exemplo, você pode optar por mostrar uma exibição de cartão diferente para usuários que não concluíram o trabalho e uma exibição de cartão diferente para os usuários que concluíram o trabalho. Isso pode ser estendido a qualquer tipo de cenário que possa surgir.

Como fornecer o esquema json

No arquivo manifesto (package.json) de um pacote, coloque o nome do arquivo JSON na chave sourceLocation no ChatCanvasCardView Abaixo está um instantâneo de exemplo de package.json:

instantâneo de package.json

Exemplo de arquivo de origem ChatCanvasCardView

{
    "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
            }
        ]
    }
}

Share via