# Message Extensions plugin

**URL:** <https://community.novulo.com/t/message-extensions-plugin/299>\
**Category:** Wiki\
**Tags:** architect, implementation, plugin\
**Created:** [June 25, 2024, 11:07am UTC](https://community.novulo.com/t/message-extensions-plugin/299 "2024-06-25T11:07:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![k.molokova](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@k.molokova](https://community.novulo.com/u/k.molokova)\
**Post date:** [June 25, 2024, 11:07am UTC](https://community.novulo.com/t/message-extensions-plugin/299/1 "2024-06-25T11:07:23Z")

</div>

We use the plugin “Message Extensions” to show a dialog where it is possible to get an user input and add/update/cache a record accordingly:

 ![copy](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/625ae7140cdb474ad62c7061bce8d9f46ed3bf21.png)

 ![copyoverview](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/fe0ff012db404ea04db7cd42b04833e143bb1e23.png)

No additional components are needed to start with the Message Extensions - only the plugin itself:

 ![1](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/ae30ca93fb68462c05735bf63e80d65c93ace6a6.png)

Under the Application maintenance subsystem \> add a new “Hidden” module \> add a new page \> add a form:

 ![2](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/b7fc5e7c2b7a94a4708b35df74c7e8231779359b.png)

Add input(s) and set it as a **Dummy field** so it won’t be saved in a database but used as a placeholder (check [UML post](https://community.novulo.com/t/data-modeling-uml/199)):

 ![3](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/3d29f1baa64638637461c85d0d6ee3e8316702a7.png)

You can add the OnChange process to an input and set a value. Notice that inside the onChange process you **need to update a record not edit it** :

 ![5](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/fd68c817708ed5b113c680e5b896437e29d3382e.png)

> OnChange process and Update Record step can be very useful together if you have several inputs that depend on each other, so it is possible to “listen” to changes, configure a conditional rendering.
> 
> In the example below \> as soon as a property input is changed \> we trigger the OnChange process on this input \> inside the process we **update record** ( **not edit!** ) where record = trigger.pagestate \> we set a value to the related response scale input (2) \> the input is updated inside a dialog.
> 
> ![6](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/1bebfabfd3842a0abf1302e223d91c6dc38c48e0.png)

When the popup is ready \> then go to the place where you are going to trigger the dialog \> create or find a process that is triggered \> lock page state (lock record \> lock settings \> lock a new record \> type \> select the hidden page you have just created):

 ![7](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/a3f91725b653e39ec39e7463ae1a4a02224788e4.png)

Add “ExtendedShowDialogAction” step from the Palette and configure it \> plugin configuration tab \> click “Add new” to add button(s) to a dialog \> set key, translation, and CSS class for add/cancel buttons:

 ![8](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/b3c26fb8f4c0a14ee5d3f2a90a9c4a5fb3363dc2.png)

If your hidden page has any input and you want to show it inside your dialog \> set FormPanel containing the inputs to show:

 ![9](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/215a12faa0edda84bc6715240c20ebe6c67302eb.png)

The “Width of formPanel containing the inputs to show” parameter is used to set the ratio of the displayed form panels. If you have 1 column \> then it needs to be empty or 100, if you have 2 columns \> values could be 50 for the first and 50 for the second column, or 40 and 60, etc.

Go to Parameters tab \> set title and message you’d like to see inside your dialog and assign page state:

 ![10](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/f63834a75dd4beb967aaab93186cdacef488f679.png)  
The parameter “Dialog width” is used to calculate the minimum width of the opened dialog.

The max width for a dialog is calculated as the current\_window\_width - 120. The minimum width of a dialog is the lower one between the provided width parameter and the max width.

Then its just kendo utilising these values to fit the dialog contents and display a window with width between the minimum and maximum widths.

After plugin configuring you can use the decision step \> you can check which key (button) was clicked by the user (OK or CANCEL, etc.):

 ![11](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/cf188ba95655fa1242781b8257a6839aeeae42af.png)

After "ExtendedShowDialogAction” step you can use value(s) from the locked page state \> add, edit, cache, etc.:

 ![12](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/a8622515db8368b6d67b320ccd6baba53e2d3b0f.png)

Before finishing your process \> **don’t forget to unlock the page state** :

 ![13](https://canada1.discourse-cdn.com/flex008/uploads/novulo/original/1X/4e277da7173d0dc6ccdc93778ee28b9afc871f9e.png)