Access a Calendar from a UI Page

jeremyeperdue · ‎05-24-2015

How can I access / call a calendar from a UI Page? Or what is the syntax to display a Date/Time field.

Is there a master list of all of the available options for fields? Example : g:dialog_buttons_ok_cancel Or g:ui_checkbox etc...

epam · ‎05-27-2015

There are a list of available jelly tags:

<g:ui_table> Put a table element on form
<g:ui_spacer pixels="6"/> Put a span element on form with margin = <pixels>
<g:ui_timezone_changer /> Display a select list of available time zones
<g:ui_update_set_picker /> Display a select list of available update sets
<g:ui_slushbucket up_down="true"/> Display a slushbucket with Add and Remove controls
<g2:ui_select_option text="text" value="value" /> Display an option element with specified text and value
<g:ui_checkbox name="new_checkbox" value="true"/> Simple checkbox
<g:ui_button action="save">${gs.getMessage('Save')}</g:ui_button> Button
<g:ui_date name="project_start_date" value="${sysparm_start_date}" /> Date picker
<g:ui_date_time name="project_start_date" value="${jvar_start_date}"/> DateTime picker
<g:ui_input_field name="name" label="Name" value="value" size="100" /> Input field
<g:ui_multiline_input_field name="message" label="Message" value="value" rows="5" /> Multiline Input
<g:ui_choicelist class="form-control" name="myquantity" table="item" field="quantity" /> Choice list for a field from a table
<g:ui_progress_worker worker_id="${sysparm_pworker_sysid}" show_cancel="false" rows="grow"/> Display a progress bar

Display a reference table

<g:ui_reference name="parent_id" id="parent_id" table="pm_project" query="active=true" completer="AJAXTableCompleter" columns="project_manager;short_description" orderby="orderby"/>

Display a choice list for custom options

<g:ui_choice_input_field id="table_name_choice" name="table_name_choice" for="table_name_choice" label="${gs.getMessage('Table')}" mandatory="true">

<option value="none">${gs.getMessage('-- None --')}</option>

<option value="1">value 1</option>

</g:ui_choice_input_field>

Form with buttons OK and Cancel

<g:ui_form onsubmit="return callback('ok');">

...

<g:dialog_buttons_ok_cancel ok="return true" />

</g:ui_form>

View solution in original post

Ian Kirby1 · ‎09-01-2015

Praveen, from a custom UI page you could create the data record from the client script defined within the page. Probably passing the processing to an Ajax script to handle on the server-side.

For your requirement, it looks as though a survey might suit your needs better than a custom form. You could create a new survey instance and call this using the iFrame method I described above for a calendar.

If the data is from a form, you could consider using GlideDialogForm instead of a custom UI Page to display the form for the table.

e.g.

function addCallerRedFlag() {

var dialog = new GlideDialogForm('Add a Red Flag for the Caller', 'u_red_flag');

dialog.setSysID(-1);

dialog.addParm('sysparm_query', 'u_user=' + g_form.getValue('caller_id'));

dialog.addParm('sysparm_form_only', 'true');

dialog.addParm('sysparm_stack', 'no');

dialog.setLoadCallback(function(iframeDoc) {

// To get the iframe: document.defaultView in non-IE, document.parentWindow in IE

var dialogFrame = 'defaultView' in iframeDoc ? iframeDoc.defaultView : iframeDoc.parentWindow;

dialogFrame = null;

});

dialog.render();

}

smruti · ‎05-11-2017

Hello Praveen,

I have very similar requirement like your.

I have to create UI page.On click of Submit button I need to insert data in a table.

Could you please help how you achieved this?

Thanks,

Smruti

Nisar2 · ‎07-23-2019

Sorry to be bumping this old thread but it contains some wonderful, excellent information.

Thanks to this, I'm using two jelly tags from the list above. However, I'm stuck at figuring out a way to apply bootstrap CSS class to those tags. I'm currently using the following code:

<g:ui_choicelist name='gh_hold_reason' class='form-control' table='incident' field='u_on_hold_reason' />

This is rendering the field in vanilla HTML and looks ugly. Is there a way I can apply Bootstrap's CSS classes to the above? For the record, using "class='form-control'" isn't taking effect.

Ian Kirby1 · ‎05-27-2015

You can use a custom UI Page to display a schedule calendar in a Service Catalogue item or a Wizard.

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

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

</j:jelly>

For a Calendar style report, the src attribute would be:

/sys_report_template.do?jvar_report_id=[[ENTER THE SYSTEM ID OF YOUR REPORT]]