How to create UI page to insert a record in the table? - Script Help!!

[Snehal2]

Hi Developer,

I have to create UI page that accept the user inputs (Multi choice questions - so mainly these are like survey questions to choose one option(Y/N)) and on clicking submit button a record should be created in the custom table that I have created.

I have created the custom table that contains the questions and its choices. So have to create UI page to create record in this custom table.

I have never worked on UI page and no clue how to start. Can anyone help me on the scripting part.

>>>>UI page Just as below for example>>>>>

Thanks in Advance.

Regards,

Snehal

[Harsh Vardhan]

you have to use here input type="radio" html field on your ui page , define id of each html type field and then using onclick event set the value into your custom table. 

Sample code:

HTML Script:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


	<p>Please select your gender:</p>
	<input type="radio" id="male" name="gender" value="male"/>
	<label for="male">Male</label><br></br>
	<input type="radio" id="female" name="gender" value="female"/>
	<label for="female">Female</label><br></br>
	<input type="radio" id="other" name="gender" value="other"/>
	<label for="other">Other</label>

	<button onclick="myFunction()">Click me</button>
</j:jelly>

Client script in UI Page:

function myFunction(){

	var x = document.getElementById("male").value;
	
	var gr = new GlideRecord('incident');
	gr.initialize();
	gr.short_description = x;
	gr.insert();

}

Note: its just a sample code, so make the changes based on your business need. 

https://www.w3schools.com/jsref/prop_radio_value.asp

If my answer helped you, kindly mark the answer correct and helpful.

[Snehal2]

Thanks a lot for the help harsh... Will try out.. Regards, Snehal

[Harsh Vardhan]

glad it helped, 

Let me know if you need any further help on it. 

[Ankur Bawiskar]

Hi Snehal,

Did you start with it and stuck some where?

you would require to create html radio buttons for those many questions; access the value in client script of UI page and then create record in the table in the client script itself

Sample Script below to access the html value inside Client Script:

Ensure you give unique value for the name attribute for the each pair of yes/no radio button

For the movies question name=movies; for the trip question name=trip

you can enhance this for your html elements

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

	Have you seen movies in last 2 weeks?<br/>
	<input type="radio" value="yes" name="movies">Yes</input><br/>
	<input type="radio" value="no" name="movies">No</input><br/>

	<br/>
	Have you taken a long trip within the last two months?<br/>
	<input type="radio" value="yes" name="trip">Yes</input><br/>
	<input type="radio" value="no" name="trip">No</input><br/>
	
	<input type="button" name="Submit" value="Submit" onClick="createRecord()"></input>
	
</j:jelly>

Client Script:

function createRecord(){

	var moviesValue = document.querySelector('input[name="movies"]:checked').value;
	var tripValue = document.querySelector('input[name="trip"]:checked').value;

	var record = new GlideRecord('tableName');
	record.movieField = moviesValue;
	record.tripField = tripValue;
	record.insert();
}

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur