Catalog Item : Needs to create ADD button.

[Vasuki]

HI,

I need to create a button to add the data from one variable to another variable.

Button name : Add

When Add button is clicked then information will be in text box 1 data needs to be moved to text box 2 variable with comma separated.

I have created a add button using rich text label variable.

Written below client script for moving the data from one variable to another.

function addToTextBox() //Function name which I mention in add button HTML code.
{
    var textVariable1Value = g_form.getValue('account_num');
    // Modify textVariable1Value as needed
    var modifiedValue = textVariable1Value + " additional details"; // Example modification
    g_form.setValue('account_num_field2', modifiedValue);
}

I need the data to be moved when click the add button, so couldn't use onload /on change/on submit client script.

Could you please help on this?

Please refer the attachment for sample, I need the data in same way

[Jaspal Singh]

Hi Vasuki,

When platform provides features to ease of life why to complicate. As you are already aware this can be achieved easily by onChange() scripts. What is the use case to use button?

[Vasuki]

Hi,

This is client requirement and also account number variable have limitation of only 12 digits without any character. so cannot enter everything in one go. 

[Vishal Birajdar · Accepted solution]

Hi @Vasuki 

Please follow the below steps : 

Step 1 : Create one variable of type "Custom" & Service portal widget to add that in custom variable

Step 2 : Create a widget 

Write below lines in widgets :

A ] Body HTML template : 

<div>
<!-- Get bootstrap -->
//you can get it from google - check with your internal team for this
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" type="text/javascript"></script> 
	

<!--col-sm-6  animated slideInLeft -->
	<div class = "container">
		<div class ="row">   
      		<!--1. Show the Button depending upon loadState from Client Script -->
            <!--4. When user clicks on button call function "c.add()"        --> 
			<button  ng-show='c.state=true'class="btn btn-primary" type="submit" ng-click="c.add()" id="myReset" >Add</button>
			
            
		</div>
  	</div>
  
</div>

B] Write script in Client controller in widget

api.controller=function(spUtil, $scope) {
  /* widget controller */
  var c = this;

  /* 2.while loading set loadState value to true will be used in HTML*/
    c.loadState = true;
	
    /* 3.Once user clicks on button invoke below function */
    c.add = function() {
        /* 4.Get value of account number & account number field from variable */      
		c.accountNum = $scope.page.g_form.getValue('account_number');   //use your vaiable names
        c.addAccountNum = $scope.page.g_form.getValue('account_number_field');  // use your vaiable names
		/* 5.If accoutn number is there then set the value of "account number field" */
		if(c.accountNum){
           /* 6.If "Account number field" is empty then add account number else concatenate*/
			if (c.addAccountNum == ''){
                                // first time add
				$scope.page.g_form.setValue('account_number_field',c.accountNum);
			}else {
				$scope.page.g_form.setValue('account_number_field',c.addAccountNum + ',' + c.accountNum);
			}



		}
   
	};

};

Save the widget

Step 3 : Add the widget in custom variable we have created in step 2

Save the variable

Portal view will be look like this :

I have made the "Account number field" variable read-only just to show you its working

Step 4 : Write onChange client script on "Account number" variable to check "12 digits" & make "Add button" read only if 12 digits are not entered.

function onChange(control, oldValue, newValue, isLoading) {

    if (isLoading) {
        return;
    }
    /*1. Get value of account number */
    var acctNum = g_form.getValue('account_number');  //use your variable name

    /*2. Get html element */
    var htmlDoc = top.document;

    /*3. Set regex */
    var re = /^(\d{10}|\d{12})$/;

    if (re.test(acctNum)) {
        htmlDoc.getElementById("myReset").disabled = false;
        htmlDoc.getElementById("myReset").style.backgroundColor = '#4CAF50'; //green
    } else {
        g_form.showFieldMsg('account_number', "Please put 12 digit account number");
        if (acctNum == '') {
            htmlDoc.getElementById("myReset").disabled = true;
            htmlDoc.getElementById("myReset").style.backgroundColor = '#D3D3D3'; //grey
        } else {
            htmlDoc.getElementById("myReset").disabled = true;
            htmlDoc.getElementById("myReset").style.backgroundColor = '#D3D3D3'; //grey
        }
    }
}

Output :

Test case 1 : If 12 digits are not entered

Test case 2 : If account number added correctly(12 digits)

Hope this helps....!!!

[hanwar2]

Hi Vishal,

Can you please help with how to create below on Service Catalog

When user clicks on Add a window should open which has Actions, DNS Records Type, DNS Records Data and when he fill and submit it should show in the below table