Custom Scripts Customization

Use cases and sample scripts designed to work with Setup (Custom Scripts) Customization.

Use Cases for Custom Scripts

Here are some example use cases that can be satisfied by the use of Custom Scripts:

As an administrator, I want custom fields to be mandatory or non-mandatory depending on the TECR Type chosen.
As a TEBR creator, if I select a TEBR Type called Short Term, my booking will be rejected if it is too long. I want to be notified if my dates exceed the threshold while I am creating the booking, so I can fix them and stop my booking from being rejected.
As a user, I should not be able to edit a TEBR after it has been closed or canceled, so that my completed bookings are unaltered for future reference.
As a user, I should not be able to add any Environments before a TEBR is saved.

Sample Script: Make the fields in an Additional Information panel mandatory

When making fields mandatory within a pop up, we use the Ext JS ‘set‘ method to reload the element with the correct validation.

‘Set‘ is used because changing the value of an element’s mandatory property to True will NOT add validation to the form until the element is reloaded.

The following script will set all Additional Information fields to be mandatory:

model.additionalInfoPanel = getComponent('changeRequestCustomFieldsId');

var additonalFields = model.additionalInfoPanel.store.data.items;

additonalFields.forEach(function(field){

field.set('Mandatory', true);

});

Once run, all the fields on the Additional Information panel will have asterisks, showing that they are mandatory.

Sample Script: Display a Message Box

To display a message box or pop up alert with Release & Verify's default styles, use the Ext JS ‘Ext.MessageBox.show‘ method.

The fn property will execute a function after the user has closed the message box.

function showMessage() {

Ext.MessageBox.show({

title: 'Warning',

message: typeName + " duration is limited to two weeks.",

buttons: Ext.Msg.OK,

icon: Ext.Msg.WARNING,

fn: function () {

model.endField.expand();

}

});

};

Sample Script: Adding and Removing Listeners

Adding listeners to buttons or fields is necessary when adding custom validation or when changing behavior based on inputs from the user. The sample below adds a change listener to the TECR Type menu. When a user makes a selection initValidators (a function defined in the CustomScripts scope) is run.

function initValidators() {

// custom script Function

}

model.crType = getComponent("CRType_ID");

model.crType.on('change', initValidators, this);

To remove the listener from the element.

model.crType.removeListener('change', initValidators, this);

Sample Script: Disable or Mask Elements

To disable sections or elements one they have been referenced use the Ext JS ‘setDisabled‘ method.

model.endField = getComponent('bookingInformationWindowEndDateField');

model.endField.setDisabled(false);

You can also use the Ext JS ‘mask‘ method, which will also allow you to show a message to the user. The default style of this mask is quite dark and has a loader, which we can override using JQuery.

model.SubPanel.body.mask('TEBR must be saved before making any

environment selections', '');

$('.x-mask').css('backgroundColor', 'rgba(255,255,255,0.7);');

$('.x-mask-msg-text').css({

'backgroundImage': 'none',

'padding': '0'

});

Sample Script: External API Call

TIP

External API calls can now be made from custom scripts by redirecting the request, wrapped in an Ajax call, through a proxy.

The following script gets data from Release & Verify and console logs the data.

console.log('Open Trigger');
var data = JSON.stringify({"ReleaseIds":[],"NoRelease":false,"PageNum":0,"RecordsPerPage":25,"SearchFilters":[],"DataGridName":"Defect"});
$.ajax({
type: "POST",
url: "/proxy/api/Defects/Search",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: (data) => {
console.log(data);
},
xhrFields: {
withCredentials: true
}
});