Ajout d’une boîte de dialogue personnalisée
Pour vous donner un aperçu de la façon d’ajouter une boîte de dialogue personnalisée dans l’application de révision, procédez comme suit :
Exemple d’utilisation
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' })
}
}
}
Appel d’une boîte de dialogue personnalisée
Cet exemple présente les informations relatives à l’ajout d’un bouton pour ouvrir une boîte de dialogue personnalisée.
Examinons à ce propos le panneau review_comment
. Vous trouverez l’extension complète ici :
Commentaire de révision
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),
}
})
}
...
}
}
Comment transmettre des args à une boîte de dialogue personnalisée
Ici, vous pouvez voir que nous transmettons args
avec l’ID de boîte de dialogue et que nous transmettons une valeur onSuccess avec ce paramètre pour gérer un rappel en cas d’événement de succès.
Nous pouvons également transmettre onCancel
si nous voulons fournir des rappels personnalisés en un clic d’annulation et le gérer dans votre événement d’annulation dans la boîte de dialogue.