Greetings community,
I have a mandate to develop a catalog item to request provisioning of Network resources in Azure. In attempt to complete this, I have divided the regions in to categories (and called the geographies). Now the requirement is to ensure that when a particular Geography is selected, only relevant regions should be added to regions dropdown. This is all done through Script Include which produces the "There is a JavaScript error in your browser console" when selected the Geographies, please review my configs below.
UI:
Script Include (Client callable):
var AzureRegions = Class.create();
AzureRegions.prototype = {
initialize: function() {},
getRegions: function(geography) {
var regions = {};
switch (geography) {
case "Americas":
regions = ["East US", "East US 2", "Central US", "North Central US", "South Central US", "West US", "West US 2", "West US 3", "Brazil South", "Brazil Southeast"];
break;
case "Europe":
regions = ["North Europe", "West Europe", "UK South", "UK West", "France Central", "France South", "Germany North", "Germany West Central", "Switzerland North", "Switzerland West", "Norway East", "Norway West"];
break;
case "Asia Pacific":
regions = ["East Asia", "Southeast Asia", "Australia East", "Australia Southeast", "Australia Central", "Central India", "South India", "West India", "Japan East", "Japan West", "Korea Central", "Korea South"];
break;
case "Middle East & Africa":
regions = ["UAE Central", "UAE North", "South Africa North", "South Africa West", "Israel Central"];
break;
default:
regions = [];
}
return regions;
},
type: "AzureRegions"
};
Catalog Client Script (UI Type: All):
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
// Call Script Include to get Regions for the selected Geography
var ga = new GlideAjax('AzureRegions');
ga.addParam('sysparm_name', 'getRegions');
ga.addParam('sysparm_geography', newValue);
ga.getXMLAnswer(function(response) {
var regions = JSON.parse(response);
// Clear previous options
g_form.clearOptions('regions');
// Add default empty option
g_form.addOption('regions', '', '-- None --');
// Populate regions dynamically
for (var i = 0; i < regions.length; i++) {
g_form.addOption('regions', regions[i], regions[i]);
}
});
}
Thank you for you assistance.
Regards,
Kamva
2 ACCEPTED SOLUTIONS
Ensure script include is client callable.
Also remember while you add the choice using addOption() then you should give choice value and choice label as well
var AzureRegions = Class.create();
AzureRegions.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getRegions: function() {
var geography = this.getParameter('sysparm_geography');
var regions = [];
switch (geography) {
case "Americas":
regions = [
{ value: "east_us", label: "East US" },
{ value: "east_us_2", label: "East US 2" },
{ value: "central_us", label: "Central US" },
{ value: "north_central_us", label: "North Central US" },
{ value: "south_central_us", label: "South Central US" },
{ value: "west_us", label: "West US" },
{ value: "west_us_2", label: "West US 2" },
{ value: "west_us_3", label: "West US 3" },
{ value: "brazil_south", label: "Brazil South" },
{ value: "brazil_southeast", label: "Brazil Southeast" }
];
break;
case "Europe":
regions = [
{ value: "north_europe", label: "North Europe" },
{ value: "west_europe", label: "West Europe" },
{ value: "uk_south", label: "UK South" },
{ value: "uk_west", label: "UK West" },
{ value: "france_central", label: "France Central" },
{ value: "france_south", label: "France South" },
{ value: "germany_north", label: "Germany North" },
{ value: "germany_west_central", label: "Germany West Central" },
{ value: "switzerland_north", label: "Switzerland North" },
{ value: "switzerland_west", label: "Switzerland West" },
{ value: "norway_east", label: "Norway East" },
{ value: "norway_west", label: "Norway West" }
];
break;
case "Asia Pacific":
regions = [
{ value: "east_asia", label: "East Asia" },
{ value: "southeast_asia", label: "Southeast Asia" },
{ value: "australia_east", label: "Australia East" },
{ value: "australia_southeast", label: "Australia Southeast" },
{ value: "australia_central", label: "Australia Central" },
{ value: "central_india", label: "Central India" },
{ value: "south_india", label: "South India" },
{ value: "west_india", label: "West India" },
{ value: "japan_east", label: "Japan East" },
{ value: "japan_west", label: "Japan West" },
{ value: "korea_central", label: "Korea Central" },
{ value: "korea_south", label: "Korea South" }
];
break;
case "Middle East & Africa":
regions = [
{ value: "uae_central", label: "UAE Central" },
{ value: "uae_north", label: "UAE North" },
{ value: "south_africa_north", label: "South Africa North" },
{ value: "south_africa_west", label: "South Africa West" },
{ value: "israel_central", label: "Israel Central" }
];
break;
default:
regions = [];
}
return JSON.stringify(regions);
},
type: 'AzureRegions'
});
Catalog client script:
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
g_form.clearOptions('regions');
// Call Script Include to get Regions for the selected Geography
var ga = new GlideAjax('AzureRegions');
ga.addParam('sysparm_name', 'getRegions');
ga.addParam('sysparm_geography', newValue);
ga.getXMLAnswer(function(response) {
var regions = JSON.parse(response);
// Add default empty option
g_form.addOption('regions', '', '-- None --');
// Populate regions dynamically
for (var i = 0; i < regions.length; i++) {
g_form.addOption('regions', regions[i].value, regions[i].label);
}
});
}I hope you can take it from here and enhance it. Ensure you give correct choice label and choice value in script include
If my response helped please mark it correct and close the thread so that it benefits future readers.
Ensure script include is client callable.
Also remember while you add the choice using addOption() then you should give choice value and choice label as well
var AzureRegions = Class.create();
AzureRegions.prototype = Object.extendsObject(AbstractAjaxProcessor, {
getRegions: function() {
var geography = this.getParameter('sysparm_geography');
var regions = [];
switch (geography) {
case "Americas":
regions = [
{ value: "east_us", label: "East US" },
{ value: "east_us_2", label: "East US 2" },
{ value: "central_us", label: "Central US" },
{ value: "north_central_us", label: "North Central US" },
{ value: "south_central_us", label: "South Central US" },
{ value: "west_us", label: "West US" },
{ value: "west_us_2", label: "West US 2" },
{ value: "west_us_3", label: "West US 3" },
{ value: "brazil_south", label: "Brazil South" },
{ value: "brazil_southeast", label: "Brazil Southeast" }
];
break;
case "Europe":
regions = [
{ value: "north_europe", label: "North Europe" },
{ value: "west_europe", label: "West Europe" },
{ value: "uk_south", label: "UK South" },
{ value: "uk_west", label: "UK West" },
{ value: "france_central", label: "France Central" },
{ value: "france_south", label: "France South" },
{ value: "germany_north", label: "Germany North" },
{ value: "germany_west_central", label: "Germany West Central" },
{ value: "switzerland_north", label: "Switzerland North" },
{ value: "switzerland_west", label: "Switzerland West" },
{ value: "norway_east", label: "Norway East" },
{ value: "norway_west", label: "Norway West" }
];
break;
case "Asia Pacific":
regions = [
{ value: "east_asia", label: "East Asia" },
{ value: "southeast_asia", label: "Southeast Asia" },
{ value: "australia_east", label: "Australia East" },
{ value: "australia_southeast", label: "Australia Southeast" },
{ value: "australia_central", label: "Australia Central" },
{ value: "central_india", label: "Central India" },
{ value: "south_india", label: "South India" },
{ value: "west_india", label: "West India" },
{ value: "japan_east", label: "Japan East" },
{ value: "japan_west", label: "Japan West" },
{ value: "korea_central", label: "Korea Central" },
{ value: "korea_south", label: "Korea South" }
];
break;
case "Middle East & Africa":
regions = [
{ value: "uae_central", label: "UAE Central" },
{ value: "uae_north", label: "UAE North" },
{ value: "south_africa_north", label: "South Africa North" },
{ value: "south_africa_west", label: "South Africa West" },
{ value: "israel_central", label: "Israel Central" }
];
break;
default:
regions = [];
}
return JSON.stringify(regions);
},
type: 'AzureRegions'
});Catalog client script:
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
g_form.clearOptions('regions');
// Call Script Include to get Regions for the selected Geography
var ga = new GlideAjax('AzureRegions');
ga.addParam('sysparm_name', 'getRegions');
ga.addParam('sysparm_geography', newValue);
ga.getXMLAnswer(function(response) {
var regions = JSON.parse(response);
// Add default empty option
g_form.addOption('regions', '', '-- None --');
// Populate regions dynamically
for (var i = 0; i < regions.length; i++) {
g_form.addOption('regions', regions[i].value, regions[i].label);
}
});
}I hope you can take it from here and enhance it. Ensure you give correct choice label and choice value in script include
If my response helped please mark it correct and close the thread so that it benefits future readers.
