Adição de uma caixa de diálogo personalizada
Para ter uma ideia de como adicionar uma caixa de diálogo personalizada no aplicativo de revisão, siga as etapas abaixo:
Exemplo de uso
const acceptWithModification = {
id: 'accept_with_modification_dialog',
view: {
component: "dialog",
"header": {
"items": [
{
component: 'label',
extraclass: "header",
label: 'Accept With Modifications',
}
]
},
content: {
items: [
{
component: 'div',
"extraclass": "revised-text",
items: [
{
component: 'label',
label: 'Revised Text (Required)',
extraclass: 'revised-text-label'
},
{
component: "textarea",
"extraclass": "revised-text-textarea",
"data": "@extraProps.revisedText",
"stopKeyPropagation": true,
}
]
},
{
component: 'div',
"extraclass": "adjudication-rationale",
items: [
{
component: 'label',
label: 'Adjudicator Comment Rationale (Required)',
extraclass: 'adjudication-rationale-label'
},
{
component: "textarea",
extraclass: "adjudication-rationale-textarea",
"data": "@extraProps.adjudicationRationale",
"on-keyup": {
"name": "",
"eventArgs": {
"keys": [
"ENTER"
]
}
},
"stopKeyPropagation": true
}
]
},
],
},
footer: {
"items": [
{
"component": "button",
"label": "Cancel",
"on-click": "handleClose",
"variant": "secondary"
},
{
"component": "button",
"label": "Submit",
"variant": "cta",
"on-click": "submitAcceptWithModification"
}
]
}
},
model: {
deps: [],
},
controller:{
submitAcceptWithModification: function () {
const extraProps = {
'revisedText': this.getValue("revisedText"),
'adjudicationRationale': this.getValue("adjudicationRationale"),
}
this.args.onSuccess(extraProps)
this.next('handleClose')
},
handleClose() {
tcx.eventHandler.next(tcx.eventHandler.KEYS.APP_HIDE_DIALOG, { id: 'accept_with_modification_dialog' })
}
}
}
Chamada de uma caixa de diálogo personalizada
Este exemplo reduz as informações relacionadas a como adicionar um botão para abrir uma caixa de diálogo personalizada.
Vamos considerar o painel review_comment
para isso. Encontre a extensão completa aqui:
Comentário da avaliação
const reviewComment = {
id: 'review_comment',
view: {
items: [
...
{
component: "button",
"icon": "MultipleAdd",
"variant": "action",
"quiet": true,
"extraclass": "hover-item",
"title": "Accept with Modifications",
"on-click": "acceptWithModification",
target: {
key: 'title',
value: 'Reject comment',
viewState: VIEW_STATE.APPEND,
},
}
],
},
controller: {
...
sendAcceptWithModificationProps(args) {
this.next('updateExtraProps', args)
},
acceptWithModification() {
tcx.eventHandler.next(tcx.eventHandler.KEYS.APP_SHOW_DIALOG,
{
id: 'accept_with_modification_dialog',
args: {
onSuccess: (extraProps) => this.next('sendAcceptWithModificationProps', extraProps),
}
})
}
...
}
}
Como passar argumentos para uma caixa de diálogo personalizada
Aqui você pode ver que passamos args
com a ID de caixa de diálogo e passamos um onSuccess com isso para lidar com um retorno de chamada em caso de evento bem-sucedido.
Também podemos passar onCancel
se quisermos fornecer alguns retornos de chamada personalizados ao clicar em cancelar e manipulá-los dentro do seu evento de cancelamento na caixa de diálogo.
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178