# How to show a message dialog Javacript language provides the function alert() to show a message dialog: this function should never be used, since it does not inherit the theme used for the whole application. 4WS.Platform provides 3 message dialogs, having the following signature: * showMessageDialog(title, message, okFunc, modal, closable, opts) * showConfirmDialog(title, message, yesFunc, noFun, opts) * showInputDialog(title, message, okFunc, modal) deprecated * showInputDialog3(title, message, okFunc, modal, cancelFun, inputValue, width, height, closable) * showListDialog(title, width, height, codes, descriptions, callback, multipleSelection, closable) * showMoreInputDialog(title, labels, attributes, okFun, modal, cancelFun, defaultAttributesValue, attrProperties) The first function shows a message dialog with a title, a message and a "ok" button. A callback function is invoked when pressing the "ok" button; the modal boolean flag is used to make the dialog modal or not. ## Example ```javascript showMessageDialog( "window1.title", "window1.message", function() {}, true, false, { "formCls" : "cls-form-alert", "windowCls": "", "windowIconCls": "", "yesButtonCls": "", "yesButtonIcon": "", "cancelButtonCls": "", "cancelButtonIcon": "", "switchButton": "Y", //Y=cancel-ok; N or null=ok-cancel "buttonAlign": "center", //"left" or "right" "width": 500, //optional (300 is default): 'auto' for autodimension "height": 300 //optional (160 is default): 'auto' for autodimension } ); ``` The second function shows a message input dialog with a title, a message and two buttons: one used to confirm and the other to refuse the choice. A callback function is invoked when pressing the confirmation button; a second callback function is invoked when pressing the refusal button. ## Example ```javascript showConfirmDialog( "window1.title", "window1.message", function() { // do something if user has confirmed the choice }, function() {}, { "formCls" : "cls-form-alert", "windowCls": "", "windowIconCls": "", "yesButtonCls": "", "yesButtonIcon": "", "cancelButtonCls": "", "cancelButtonIcon": "", "switchButton": "Y", //Y=cancel-ok; N or null=ok-cancel "buttonAlign": "center" //"left" or "right" }); ``` If you want more buttons you can use this ```javascript showConfirmDialogButtons("window1.title", "window1.message", titleButtons[ 'button1.title', 'button2.title' ], funButtons[ function() { // do something if user has selected the button1 }, function() { // do something if user has selected the button2 } ], { formCls: null, //'cls-form-alert' for example buttonAlign: null, //'center' is the default, 'right' or 'left' windowCls: null, //'windowCls' for example windowIconCls: null, //'windowIconCls' for example windowWidth: null, // default 300, windowHeight: null, // default 160, windowMinWidth: null, // default 300, windowMinHeight: null, // default 160, clsButtons: [ 'button1Cls', 'button2Cls', ], //optional, you can set null iconButtons: [ '/images/button1Icon.png', '/images/button2Icon.png' ] //optional, you can set null } //options ); ``` The third function shows a message dialog with a title, a message and a "ok" button. A callback function providing the inputed value is invoked when pressing the "ok" button; the modal boolean flag is used to make the dialog modal or not. ## Example ```javascript showInputDialog3( "window1.title", "window1.message", function(value) { // do something with the inputed "value" }, true, function(){ //cancel callback }, "defaultValue", 500, 300, true); ``` With the forth one, you can open a dialog with a list inside it, where the user can choose one (or more) entries and use a callback function to handle the selected ones. ```javascript showListDialog( "My Dialog Title", 500, //Width 300, //Height [1, 2, 3, 4, 5], //My codes (example: IDs) ["First Code", "Second Code", "Third Code", ...], //My descriptions function(entry){ console.log(entry[0]); //Logs the selected CODE }, false, //Only allow one item to be selected false //Do not let the user close the modal without selecting an entry ) ``` You can directly specify title and message in your own language if your application supports one language only, otherwise, you should specify "entries" for title and message whose real translations can be defined through the "Translation" functionality: this feature allows you to add new translations, via "add" button; in this way you can create translations for each language that will be used by these message dialogs. For each message dialog, you should add two rows in the "Translations" list: one for the title and the other for the message entry. For each row, you can leave empty the first cell (Topic), fill in "Id" with the entry (title/message) and fill in all the other dynamic columns with a translation for each language. If you want more input valued from users you can use: ```javascript showMoreInputDialog( "window1.title", [ "prefix.custom label one", "prefix.custom label two" ], //labels [ "fieldOne", "fieldTwo" ], //attributes function(value) { // do something with the inputed "value" }, //okFun true, //modal function(){ //cancel callback }, //cancelFun [ "", "field two value" ], //defaultAttributesValue , [ {type: 'NUM'}, {type: 'CHECK', positiveValue: 'Y', negativeValue: 'N'}] //attrProperties ); ``` If you want a confirm by user you can use --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://4wsplatform.gitbook.io/knowledge-base/how-to-show-a-message-dialog.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.