I want a Dialog box when I clicked the button. For which I have used UI action and UI page. If I click the button, it shows that "Page is not found".

kavi11 · ‎10-25-2016

Hi,

I want a Dialog box when I clicked the button. For which I have used UI action and UI page. But If I click the button, it shows that "Page is not found", even though I mentioned the correct name in the UI page. Can anyone help me.

Thanks,

Kavishree S

kavi11 · ‎10-25-2016

Hi,

I have attached my coding below:

Coding:

UI Action :

Name : Comments Dialog

Action_Name : comments_dialog

Client : true

function commentsDialog() {

//Get the values to pass into the dialog

var comments_text = g_form.getValue("comments");

var short_text = g_form.getValue("short_description");

//Initialize and open the dialog

var dialog = new GlideDialogWindow("comments_dialog"); //Instantiate the dialog containing the UI Page 'add_comments_dialog'

dialog.setTitle("Add Task Comments"); //Set the dialog title

dialog.setPreference("comments_text", comments_text); //Pass the comments into the dialog

dialog.setPreference("short_text", short_text); //Pass in a short description for use in the dialog

dialog.render(); //Open the dialog

}

UI Page:

Name : comments_dialog

HTML:

<g:ui_form>

<g:evaluate var="jvar_short_text"

expression="RP.getWindowProperties().get('short_text')" />

<g:evaluate var="jvar_comments_text"

expression="RP.getWindowProperties().get('comments_text')" />

${jvar_short_text}

</td>

</tr>

<tr>

<td>

<g:ui_multiline_input_field name="dialog_comments" id="dialog_comments" label="Additional comments"

value="${jvar_comments_text}" mandatory="true" />

</td>

</tr>

<tr>

</td>

</tr>

<g:dialog_buttons_ok_cancel ok="return validateComments()" ok_type="button" cancel_type="button" />

</td>

</tr>

</table>

</g:ui_form>

Client Script :

function validateComments() {

//Make sure there are comments to submit

var comments = gel("dialog_comments").value;

comments = trim(comments);

if (comments == "") {

//If comments are empty, alert the user and stop submission

alert("Please enter your comments before submitting.");

return false;

}

//If there are comments, close the dialog window and submit them

GlideDialogWindow.get().destroy(); //Close the dialog window

g_form.setValue("short_description", comments); //Set the Short Description field with comments in the dialog

g_form.submit();

}

This is what I am getting while clicking on the link.

Julian Hoch · ‎10-25-2016

Can you also paste the content of the text box next to "Go" in the popup?

kavi11 · ‎10-27-2016

Hi Julian Hoch,

I got the dialog box correctly. Since the UI page, which I have created is in scoped application, it cannot be found(As the UI Page has to be in global). For which I have use "GlideDialogForm" instead of "GlideDialogWindow".

But Still I have a problem in the dialog box.

Actually I want a dialog box like below:

But I'm getting the dialog box like below:

UI Action:

=======

function createBulkTagDialogWindowForCI() {

var title = new GwtMessage().getMessage('Assign Standard Cloud Management Tags');

var dialog = new GlideDialogForm('assign_aws_tags', 'x_68754_oracle_clo_assign_aws_tags');

dialog.setTitle(title);

// dialog.setPreference('sysparm_sys_id', getValidStateCiIds());

dialog.render();

return false;

}

UI Page :

======

HTML :

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:requires name="styles/assign_aws_tags.css"/>

<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true"/>

<g:requires name="scripts/lib/jquery_includes.js" includes="true"/>

<g:evaluate var="jvar_resource_ids" expression="RP.getWindowProperties().get('sysparm_sys_id')"/>

<g:evaluate var="jvar_tags" object="true">

var tags = [];

var tagIndex = 0;

var tagGr = new GlideRecord('x_68754_oracle_clo_cloud_mgmt_tag');

tagGr.addQuery('category', 'standard');

tagGr.query();

while (tagGr.next()) {

gs.info("sys_id :"+tagGr.getValue("sys_id"));

gs.info("name :" +tagGr.getValue("name"));

gs.info("table :" +tagGr.getValue("table"));

var idVal = tagGr.getValue("sys_id");

var nameVal = tagGr.getValue("name");

var tableNameVal = tagGr.getValue("table");

tags.push({'id': idVal, 'name': nameVal, 'table': tableNameVal, 'index': tagIndex++});

}

gs.info("tags : " +tags);

var tagsStr = new global.JSON().encode(tags);

gs.info("tagsStr : " +tagsStr);

tags;

</g:evaluate>

<g:evaluate var="jvar_tag_default_values" object="true">

// Calculates the default values to populate in the popup based on the CI's selected

var ciIds = ('${jvar_resource_ids}').split(",");

var tags = new global.JSON().decode('${tagsStr}');

function getIndexOfTag(key, array) {

for (var i = 0; i != array.length; i++) {

if (key == array[i].id) {

return i;

}

return -1;

}

var ciTagResult = [];

// Iterate over the standard tags and then the CIs. Put in the value of the tag which can be empty or the actual value

// If you find a different value on a different CI, put Multiple Values in the value

for (var i = 0; i != tags.length; i++) {

var tag = tags[i];

var tagId = tag.id;

for (var j = 0; j != ciIds.length; j++) {

var tagTable = tag.table;

tagTable = tagTable == null ? "x_68754_oracle_clo_cloud_management_custom_tag_value" : tagTable;

var type = tagTable == "x_68754_oracle_clo_cloud_management_custom_tag_value" ? "value" : "lookup";

var gr = new GlideRecord(x_68754_oracle_clo_cloud_management_ci_tag_value"");

gr.addQuery("cmdb_ci", ciIds[j]);

gr.addQuery("tag", tagId);

gr.addNotNullQuery("value_id");

gr.query();

var valueId = '';

if (gr.next()) {

valueId = gr.getValue("value_id");

}

var index = getIndexOfTag(tagId, ciTagResult);

if (index == -1) {

// Add new entry to the end

ciTagResult.push({'id':tagId, 'table':tagTable, 'type':type, 'value':valueId});

} else if (valueId != ciTagResult[index].value) {

ciTagResult[index].value = "<multiple values>";

}

} // end for ciIds

} // end for tags

var tagDefaultValues = [];

for (var j = 0; j != tags.length; j++) {

var tag = tags[j];

var indexOfTag = getIndexOfTag(tag.id, ciTagResult);

if (indexOfTag == -1) {

// Push empty values for this tag row

tagDefaultValues.push({'value':'', 'displayValue':'', 'type':'', 'index':j});

continue;

}

var ele = ciTagResult[indexOfTag];

var eleValue = ele.value;

var value = '';

var displayValue = eleValue;

if (eleValue != "<multiple values>" && eleValue != "") {

// Do a lookup of the actual value from the table

var tableGr = new GlideRecord(ele.table);

tableGr.get(eleValue);

if (tableGr.isValid()) {

displayValue = tableGr.getDisplayValue();

}

value = eleValue;

}

// value and displayValue are used to populate default selection when drawing form

// type and index is used to change the font styl

tagDefaultValues.push({'value':value, 'displayValue':displayValue, 'type':ele.type, 'index':j});

}

var tagDefaultValuesStr = new global.JSON().encode(tagDefaultValues);

tagDefaultValues;

</g:evaluate>

// When the page gets loaded, run the event handler for on-load event.

addLoadEvent(

function() {

highlighDefaultTagSelections('${tagDefaultValuesStr}');

}

);

</script>

</span>

<label for="tag_select_all_checkbox" class="checkbox-label">${gs.getMessage('Tag Name')}</label>

</span>

<label>${gs.getMessage('Tag Value')}</label>

</span>

</div>

<j:forEach items="${jvar_tags}" var="jvar_tag" indexVar="jvar_index">

<g:evaluate var="jvar_tag_id" expression="jelly.jvar_tag.id" jelly="true"/>

<g:evaluate var="jvar_tag_name" expression="jelly.jvar_tag.name" jelly="true"/>

<g:evaluate var="jvar_tag_table" expression="jelly.jvar_tag.table" jelly="true"/>

<g:evaluate var="jvar_tag_value" expression="jelly.jvar_tag_default_values[${jvar_index}] != undefined ? jelly.jvar_tag_default_values[${jvar_index}].value : ''" jelly="true"/>

<g:evaluate var="jvar_tag_displayValue" expression="jelly.jvar_tag_default_values[${jvar_index}] != undefined ? jelly.jvar_tag_default_values[${jvar_index}].displayValue : ''" jelly="true"/>

<!-- This is needed by the g:ui_reference to trigger the onChange on the text field.

Used in lightweight_reference.xml -->

<g:evaluate var="jvar_onchange" expression="'onChangeTagValue(this, ' + ${jvar_index} + ',\'${jvar_tag_value}\')'"/>

${jvar_tag_name}

</label>

</span>

</span>

<j:if test="${jvar_tag_table != 'null'}">

<g:ui_reference id="tag_lookup_${jvar_index}" name="tag_lookup_${jvar_index}" table="${jvar_tag_table}"

displayValue="${jvar_tag_displayValue}" value="${jvar_tag_value}" completer="AJAXTableCompleter"

aria-invalid="true" aria-describedby="tag_error_${jvar_index}" class="form-control"/>

</j:if>

<j:if test="${jvar_tag_table == 'null'}">

<input id="tag_value_${jvar_index}" type="text" maxlength="255" size="20" value="${jvar_tag_displayValue}"

onchange="onChangeTagValue(this, ${jvar_index}, '${jvar_tag_displayValue}')"

aria-invalid="true" aria-describedby="tag_error_${jvar_index}" class="form-control"/>

</j:if>

</span>

</span>

</div>

</j:forEach>

</div>

</div>

${gs.getMessage('Assign Tags')}

</button>

</div>

</form>

</j:jelly>

Client Script :

var loadingDialog;

/*********************************************/

// Highlight Default Tag Selections

/*********************************************/

function highlighDefaultTagSelections(tagDefaultValuesStr) {

var tagDefaultValues = tagDefaultValuesStr.evalJSON();

for (var i = 0; i < tagDefaultValues.length; i++) {

var row = tagDefaultValues[i];

var rowType = row.type;

if (rowType == "") {

continue;

}

var rowIndex = row.index;

var id = "tag_" + rowType + "_" + rowIndex;

if (rowType == "lookup") {

id = "sys_display." + id;

}

var element = getForm().elements[id];

element.style.color = "gray";

element.style.fontStyle = "italic";

if(element.value == "<multiple values>") {

element.placeholder = element.value;

element.value = '';

}

/*********************************************/

// Assign Tags

/*********************************************/

function assignAwsTags(ciIds) {

var selectedTags = getSelectedTags();

if (!validateForm(selectedTags)) {

return false;

}

var ga = startAwsTagResourcesWorkflow(ciIds, selectedTags);

var contextId = ga.getAnswer();

hideLoadingDialog();

if (contextId != '') {

GlideDialogWindow.get().destroy();

notificationMessage(getMessage("Assigning Standard Tags can take up to a few minutes to complete. Refresh the page to see the updated tags."));

// dont return true otherwise it redirects to new page

return false;

}

displayFormError(getMessage("Could not start the workflow"));

return false;

}

function getSelectedTags() {

var selectedTags = {};

var form = getForm();

var inputElems = form.getElementsByTagName("input");

var checkBoxIndex = 0;

for (var i = 0; i < inputElems.length; i++) {

var elem = inputElems[i];

if (elem.type === 'checkbox' && elem.id != "tag_select_all_checkbox") {

if (elem.checked == true) {

var idVal = form.elements['tag_id_' + checkBoxIndex].value;

var name = form.elements['tag_name_' + checkBoxIndex].value;

var value = '';

var displayValue = '';

var lookupElem = form.elements['tag_lookup_' + checkBoxIndex];

if (lookupElem != undefined) {

value = lookupElem.value;

displayValue = form.elements['display_hidden.tag_lookup_' + checkBoxIndex].value;

} else {

value = form.elements['tag_value_' + checkBoxIndex].value;

}

var index = form.elements['tag_index_' + checkBoxIndex].value;

selectedTags[name] = { id: idVal, value: value, index: index, displayValue: displayValue };

}

checkBoxIndex ++;

}

return selectedTags;

}

function validateForm(tags) {

var foundError = false;

var tagNum = Object.keys(tags).length;

if (tagNum == 0) {

displayFormError(getMessage("Select a tag to assign"));

foundError = true;

} else if (tagNum > 10) {

displayFormError(getMessage("Cannot select more than 10 tags"));

foundError = true;

} else {

clearFormError();

}

for (var prop in tags) {

if (tags.hasOwnProperty(prop)) {

var tag = tags[prop];

var tagIndex = tag.index;

var result = validateTagValue(tag.value);

var tagErrorElemId = "tag_error_" + tagIndex;

if (result != '') {

displayFieldError(tagErrorElemId, tagIndex, result);

foundError = true;

} else {

clearFieldError(tagErrorElemId, tagIndex);

}

if (foundError) {

return false;

}

return true;

}

function validateTagValue(val) {

if (val === '' || val.trim() === '') {

return getMessage('Invalid or empty value');

}

if (val.length > 255) {

return getMessage('Cannot exceed 255 characters');

}

if (val.indexOf('aws:') === 0) {

return getMessage('Cannot start with "aws:"');

}

return ''; // no errors

}

function startAwsTagResourcesWorkflow(ciIds, selectedTags) {

// Convert to name, value pairs

var tagNameValues = {};

for (var prop in selectedTags) {

if (selectedTags.hasOwnProperty(prop)) {

var tag = selectedTags[prop];

var value = tag.value;

if (tag.displayValue != '') {

value = tag.displayValue;

} else {

value = ':'+value; // for freeForm tags, specify with ':' prefix

}

tagNameValues[prop] = value;

}

var ga = new GlideAjax('AwsBulkTagUtil');

ga.addParam('sysparm_name', 'startAwsTagResourceWorkflow');

ga.addParam('sysparm_ci_ids', JSON.stringify(ciIds.split(",")));

ga.addParam('sysparm_tags', JSON.stringify(tagNameValues));

showLoadingDialog();

ga.getXMLWait();

return ga;

}

function onClickSelectAllCheckbox() {

var form = getForm();

var selectAllCheckbox = document.getElementById("tag_select_all_checkbox");

var state = selectAllCheckbox.checked;

var inputElems = form.getElementsByTagName("input");

var checkBoxIndex = 0;

for (var i = 0; i < inputElems.length; i++) {

var elem = inputElems[i];

if (elem.type === 'checkbox' && elem.id != "tag_select_all_checkbox") {

elem.checked = state;

var index = form.elements['tag_index_' + checkBoxIndex].value;

// Trigger the onchange on the checkbox so we can clear errors if needed

onChangeCheckbox(elem, index);

checkBoxIndex ++;

}

function onChangeCheckbox(checkboxElem, index) {

if (!checkboxElem.checked) {

// Clear any errors when checkbox is unselected

clearFieldError("tag_error_" + index, index);

}

function onChangeTagValue(tagValueElem, index, originalValue) {

// Reset the font and color if the value changed

var elem = tagValueElem;

if (tagValueElem.id.startsWith("tag_lookup_")) {

elem = getForm().elements["sys_display." + tagValueElem.id];

}

var newValue = tagValueElem.value;

if (newValue != "" && newValue == originalValue) {

elem.style.color = "gray";

elem.style.fontStyle = "italic";

} else {

elem.style.color = "";

elem.style.fontStyle = "";

}

var result = validateTagValue(newValue);

if (result != '') {

displayFieldError("tag_error_" + index, index, result);

} else {

clearFieldError("tag_error_" + index, index);

}

// Also select the checkbox for that row

getForm().elements["tag_checkbox_" + index].checked = true;

}

function getForm() {

return gel("tag_form");

}

function displayFormError(message) {

displayFieldError("form_error", -1, message);

}

function displayFieldError(field, index, message) {

fieldElem = gel(field);

if (fieldElem != undefined) {

fieldElem.innerHTML = message;

if (index != -1) {

$j('#tag_value_div_' + index).addClass("has-error");

}

fieldElem.style.display = "inline";

}

function clearFormError() {

clearFieldError("form_error", -1);

}

function clearFieldError(field, index) {

fieldElem = gel(field);

if (fieldElem != undefined) {

fieldElem.innerHTML = "";

if (index != -1) {

$j('#tag_value_div_' + index).removeClass("has-error");

}

fieldElem.style.display = "none";

}

function showLoadingDialog() {

loadingDialog = new GlideDialogWindow("dialog_loading", true);

loadingDialog.setTitle(getMessage('Assigning Standard Tags is in progress. This can take up to a few minutes.'));

loadingDialog.render();

}

function hideLoadingDialog() {

loadingDialog.destroy();

}

function notificationMessage(msg) {

var options = {};

options.text = "<b style='color:blue;'>" + msg + "</b>";

options.type = "info";

options.closeDelay = "10000"; // 10 secs, in millisecs

new NotificationMessage(options);

}

Can you help me to resolve this problem?

Thanks,

Kavishree S

dave_jookhuu · ‎06-26-2018

Create your UI page in global scope.. If you created your UI page in Scoped App, the page not found will happen..

The same thing applies to Widgets as well... However, I don't understand why it does not work in Scoped App and want to know.