Add tables with rows and columns in the catalog item

taqdeer · ‎01-29-2021

Hi All,

is it possible to create a table with rows and columns in the catalog item. I want to display the information to the users in the form of table in the catalog item. Below is the reference.

Based on the information below, please answer the next questions.

A	b	c
d	e	f
g	h	i

j	k	l
m	n	o
p	q	r

Could any one please help me with this.

Ankur Bawiskar · ‎01-29-2021

Hi,

something like this

1) you can add your Own HTML table and add style etc

2) Widget

HTML:

<div>
<!-- your widget template -->
  <head>
		<style>
			table {
			font-family: arial, sans-serif;
			border-collapse: collapse;
			width: 100%;
			}

			td, th {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
			}

			tr:nth-child(even) {
			background-color: #dddddd;
			}
		</style>
	</head>
	<body>

		<h2>HTML Table</h2>

		<table>
			<tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Alfreds Futterkiste</td>
				<td>Maria Anders</td>
				<td>Germany</td>
			</tr>
			<tr>
				<td>Centro comercial Moctezuma</td>
				<td>Francisco Chang</td>
				<td>Mexico</td>
			</tr>
			<tr>
				<td>Ernst Handel</td>
				<td>Roland Mendel</td>
				<td>Austria</td>
			</tr>
		</table>
	</body>
</div>

Variable:

Output:

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

Ankur Bawiskar · ‎01-29-2021

Hi,

something like this

1) you can add your Own HTML table and add style etc

2) Widget

HTML:

<div>
<!-- your widget template -->
  <head>
		<style>
			table {
			font-family: arial, sans-serif;
			border-collapse: collapse;
			width: 100%;
			}

			td, th {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
			}

			tr:nth-child(even) {
			background-color: #dddddd;
			}
		</style>
	</head>
	<body>

		<h2>HTML Table</h2>

		<table>
			<tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Alfreds Futterkiste</td>
				<td>Maria Anders</td>
				<td>Germany</td>
			</tr>
			<tr>
				<td>Centro comercial Moctezuma</td>
				<td>Francisco Chang</td>
				<td>Mexico</td>
			</tr>
			<tr>
				<td>Ernst Handel</td>
				<td>Roland Mendel</td>
				<td>Austria</td>
			</tr>
		</table>
	</body>
</div>

Variable:

Output:

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

taqdeer · ‎01-29-2021

Hi Ankur,

Thanks for the response.

I have copied the code and pasted it in the UI Macro. I have created a macro variable and added this UI Macro. It didn't work still. Could you please help me with this. Below is the screenshot.

Ankur Bawiskar · ‎01-29-2021

Hi,

for macro some more syntax is required

Updated below

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	
		<style>
			table {
			font-family: arial, sans-serif;
			border-collapse: collapse;
			width: 100%;
			}

			td, th {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
			}

			tr:nth-child(even) {
			background-color: #dddddd;
			}
		</style>

		<h2>HTML Table</h2>

		<table>
			<tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Alfreds Futterkiste</td>
				<td>Maria Anders</td>
				<td>Germany</td>
			</tr>
			<tr>
				<td>Centro comercial Moctezuma</td>
				<td>Francisco Chang</td>
				<td>Mexico</td>
			</tr>
			<tr>
				<td>Ernst Handel</td>
				<td>Roland Mendel</td>
				<td>Austria</td>
			</tr>
		</table>
</j:jelly>

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

taqdeer · ‎01-29-2021

Hi Ankur,

it still didn't work for me. I copied the above script and pasted in the UI Macro. I didn't do any thing with Widget still. Do you want me to do something with it?

Ankur Bawiskar · ‎01-29-2021

Hi,

After creating UI macro did you add it to the macro variable

What is not working

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader