How to change size of g_modal.alert in HR Agent Workspace?

miro2
Mega Sage

Hi
How can I customize the size of the popup (width and height)? I want to make it smaller.

Perhaps instead of using g_modal.alert, I should use something different?

Additionally, can the title be editable? For example, instead of 'Alert', I want to display 'Warning'.

The user only needs to click the OK button.

 

 if (g_user.userID != g_form.getValue('assigned_to')) {
        g_modal.alert('Only the assigned to can end this action.');
        return;
    }


miro2_0-1708952353629.png

1 ACCEPTED SOLUTION

Ademir Amaral1
Kilo Sage

Hi @miro2 .

 

Yes, 

You can use the GlideModal object instead of g_modal.alert. Here's an example of how you can do this:

if (g_user.userID != g_form.getValue('assigned_to')) {
var dialog = new GlideModal('my_custom_dialog');
dialog.setTitle('Warning');
dialog.setSize(200, 100);
dialog.renderWithContent('Only the assigned to can end this action.');
return;
}


To make this work, you will need to create a UI page with the ID "my_custom_dialog" and define the HTML content for the dialog. Here's an example of what the UI page could look like:

<!--?xml version="1.0" encoding="utf-8"?-->
<ui_page>
<title>My Custom Dialog</title>
<description>Custom dialog for displaying warnings</description>
<processing_script> </processing_script>

<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{content}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="javascript&colon;GlideModalClose();">OK</button>
</div>

</ui_page>

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.

 

View solution in original post

4 REPLIES 4

Ademir Amaral1
Kilo Sage

Hi @miro2 .

 

Yes, 

You can use the GlideModal object instead of g_modal.alert. Here's an example of how you can do this:

if (g_user.userID != g_form.getValue('assigned_to')) {
var dialog = new GlideModal('my_custom_dialog');
dialog.setTitle('Warning');
dialog.setSize(200, 100);
dialog.renderWithContent('Only the assigned to can end this action.');
return;
}


To make this work, you will need to create a UI page with the ID "my_custom_dialog" and define the HTML content for the dialog. Here's an example of what the UI page could look like:

<!--?xml version="1.0" encoding="utf-8"?-->
<ui_page>
<title>My Custom Dialog</title>
<description>Custom dialog for displaying warnings</description>
<processing_script> </processing_script>

<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{content}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="javascript&colon;GlideModalClose();">OK</button>
</div>

</ui_page>

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.

 

@Ademir Amaral1 
thanks for quick reply
My question is will this work on HR agent workspace? or only for classic UI?

Edit:
it works only for classic UI, not for workspace

just for reference, this solution works on the classic UI.

I haven’t found a solution for workspace yet.

Did you make it work yet?
In the workspace you need to use the g_modal api. With g_modal.showFrame you can use your UI page in the workspace.
Example:

function onClick(g_form) {

g_modal.showFrame({

url: 'url',

size: 'lg',

title: 'Your Title',

callback: function(confirmed) {

if (confirmed) {

g_form.save();

}

}

});

}