{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":188,"path":"api-reference/c_GlideModalFormV3API.md","title":"GlideModalForm - Client","bundle":null,"doc_type":null,"release":"australia","body":"\n# GlideModalForm- Client\n\nThe GlideModalForm API provides methods to display a form in a GlideModal.\n\nGeneral usage of the GlideModalForm class involves creating the object, setting any preferences, and then rendering the GlideModalForm.\n\n```\nvar dialog = new GlideModalForm('dialog title', 'table_name_or_form_name', [callback on completion of submit])\n  dialog.setPreference('name', 'value');\n  dialog.render();\n```\n\nSpecify the query parameters that are passed to the form using the setPreference\\(\\) method. Any name/value pair that you specify with setPreference\\(\\) is sent along with the form POST request to display the form.\n\nThe GlideModalForm is set to fill the height of the document window.\n\n**Parent Topic:**[Client API reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/api-reference/api-client.md)\n\n## GlideModalForm - GlideModalForm\\(String title, String tableName, Function onCompletionCallback, Boolean readOnly\\)\n\nCreates an instance of the GlideModalForm class.\n\n<table id=\"table_ikc_xjm_qv\" class=\"parameters\"><thead><tr><th>\n\nName\n\n</th><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\ntitle\n\n</td><td>\n\nString\n\n</td><td>\n\nModal form title.\n\n</td></tr><tr><td>\n\ntableName\n\n</td><td>\n\nString\n\n</td><td>\n\nTable being shown.\n\n</td></tr><tr><td>\n\nonCompletionCallback\n\n</td><td>\n\nFunction\n\n</td><td>\n\nFunction to call after the form has been submitted and processed on the server. The callback function has the form`callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where:\n\n -   **action\\_verb**: Name of the UI action executed. Examples are sysverb\\_insert \\(Submit button\\), sysverb\\_cancel, sysverb\\_save \\(Save button\\).\n-   **sys\\_id**: Sys\\_id of the affected record.\n-   **table**: Name of the table containing the record.\n-   **displayValue**: Value that appears on the form.\n\n</td></tr><tr><td>\n\nreadOnly\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nOptional. Flag that indicates whether the modal form should be set to read only.Valid values:\n\n-   true: Set form to read only.\n-   false: Set for to read/write.\n\n Default: false\n\n</td></tr></tbody>\n</table>This example shows how to instantiate a GlideModalForm object.\n\n```\nfunction openDevice(deviceSysID, deviceName) {\n  var uName = gel('hidden_user_name').value + \"'s \";\n  deviceName = new String(deviceName).escapeHTML();\n  var gp = new GlideModalForm(uName + deviceName, \"cmn_notif_device\", refreshNotifPage);\n  gp.addParm('sys_id', deviceSysID);\n  gp.render();\n}\n```\n\n## GlideModalForm - addParm\\(String name, String value\\)\n\nSets the specified form field to the specified value.\n\n|Name|Type|Description|\n|----|----|-----------|\n|name|String|Form field name. If the specified name is not a field in the associated modal form, it is ignored.|\n|value|String|Value to set the specified form field to.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThis example shows how to call addParm\\(\\) to set the value of the sys\\_id field the modal form.\n\n```\nfunction openDevice(deviceSysID, deviceName) {\n  var uName = gel('hidden_user_name').value + \"'s \";\n  deviceName = new String(deviceName).escapeHTML();\n  var gp = new GlideModalForm(uName + deviceName, \"cmn_notif_device\", refreshNotifPage);\n  gp.addParm('sys_id', deviceSysID);\n  gp.render();\n}\n```\n\n## GlideModalForm - setSysID\\(String sys\\_id\\)\n\nSets the object's sys\\_id preference.\n\n|Name|Type|Description|\n|----|----|-----------|\n|sys\\_id|String|The id preference. One of the query parameters passed to the form.|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThis example shows how to use the setSysID\\(\\) method to initialize the value of the sys\\_id.\n\n```\nfunction(startDate, endDate) {\n  var dialog = new GlideModalForm(\"Add Schedule Item\", \"cmn_schedule_span\");\n  dialog.setSysID(\"-1\");\n  dialog.addParm(\"sysparm_collection\", \"cmn_schedule\");\n  dialog.addParm(\"sysparm_collectionID\", this.sysId);\n  dialog.addParm(\"sysparm_collection_key\", \"schedule\");\n \n  var q = \"schedule=\" + this.sysId + \"^start_date_time=\"\n   + startDate.serializeInUserFormat() + \"^end_date_time=\"\n   + endDate.serializeInUserFormat() + \"^\";\n\n  if (startDate.isAllDay(endDate))\n    q += \"^all_day=true^\";\n \n  dialog.addParm(\"sysparm_query\", q);\n  dialog.render();\n}\n```\n\n## GlideModalForm - setCompletionCallback\\(Function callbackFunction\\)\n\nSets the function to be called when the form has been successfully submitted and processed by the server.\n\n<table id=\"table_aqr_ply_kv\" class=\"parameters\"><thead><tr><th>\n\nName\n\n</th><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\ncallbackFunction\n\n</td><td>\n\nFunction\n\n</td><td>\n\nCallback function to call when the form has been successfully processed. The callback function has the form `callbackFunction(String action_verb, String sys_id, String table, String displayValue)` where:\n\n-   **action\\_verb**: action\\_name from a sys\\_ui\\_action record\n-   **sys\\_id**: Sys\\_id of the affected record\n-   **table**: Name of the table containing the record\n-   **displayValue**: Value that appears on the form\n\n</td></tr></tbody>\n</table>|Type|Description|\n|----|-----------|\n|void| |\n\nThis example shows how to set the onload callback function of the associated modal.\n\n```\nfunction handleCreateOrEdit(targetFieldName, sourceFieldName, adapterRuleId, transformerSysId){\n  dialog = new GlideModalForm('Edit Adapter Rule', \"sys_adapter_rule\");\n  dialog.setSysID(adapterRuleId); //Pass in sys_id to edit existing record\n  dialog.addParm('sysparm_form_only', 'true'); //Add or remove related lists\n  dialog.setOnloadCallback(hideModalForm);\n  dialog.setCompletionCallback(handleAdapterCreatedOrUpdated);\n  dialog.render(); //Open the dialog\n}\nfunction handleAdapterCreatedOrUpdated(action_verb, sys_id, table, displayValue) {\n  var draftRecordTransformer = g_form.getValue(\"draft_record_transformer\");\n  if(draftRecordTransformer == null || draftRecordTransformer.length == 0) {\n    //sync Sticky Replications if it is enabled.\n    var ajax = new GlideAjax('ReplicationPoolUtil');\n    ajax.addParam('sysparm_name', 'syncStickyReplicationSet');\n    ajax.addParam('sysparm_entry_set', g_form.getValue(\"entry_set\"));\n    ajax.getXMLWait();\n  }\n}\n```\n\n## GlideModalForm - setOnloadCallback\\(Function callbackFunction\\)\n\nSets the function to be called after the form has been loaded.\n\n|Name|Type|Description|\n|----|----|-----------|\n|callbackFunction|Function|Function to call after the form has been loaded. The callback function has the form `callBackFunction(GlideModalForm obj)`|\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThis example shows how to set the on load callback function of the associated modal.\n\n```\nfunction handleCreateOrEdit(targetFieldName, sourceFieldName, adapterRuleId, transformerSysId){\n  dialog = new GlideModalForm('Edit Adapter Rule', \"sys_adapter_rule\");\n  dialog.setSysID(adapterRuleId); //Pass in sys_id to edit existing record\n  dialog.addParm('sysparm_form_only', 'true'); //Add or remove related lists\n  dialog.setOnloadCallback(hideModalForm);\n  dialog.setCompletionCallback(handleAdapterCreatedOrUpdated);\n  dialog.render(); //Open the dialog\n}\n```\n\n## GlideModalForm - render\\(\\)\n\nShows the modal form.\n\n|Name|Type|Description|\n|----|----|-----------|\n|None| | |\n\n|Type|Description|\n|----|-----------|\n|void| |\n\nThis example shows how to call render\\(\\) to display the modal.\n\n```\nfunction openDevice(deviceSysID, deviceName) {\n  var uName = gel('hidden_user_name').value + \"'s \";\n  deviceName = new String(deviceName).escapeHTML();\n  var gp = new GlideModalForm(uName + deviceName, \"cmn_notif_device\", refreshNotifPage);\n  gp.addParm('sys_id', deviceSysID);\n  gp.render();\n}\n```\n\n"}}