How to make catalog item widget editable to allow users to add some inputs to the table?

mania · ‎11-19-2023

Hi,

I have created a variable with 'custom with label' type and linked a widget to it in catalog item.

When I view from portal it shows as an image. But I need to enter some inputs in it.

Can anyone help on this.

Thanks in Advance!

Abhi13 · ‎11-20-2023

Hi @mania ,

I would suggest you to use contenteditable="true" for both th and td .

Please find below sample

<table>

<tr>

<th contenteditable="true"> </th>

<th contenteditable="true">Cost</th>

Thanks,

Abhishek

View solution in original post

Abhi13 · ‎11-20-2023

Hi @mania , Can you share the script of Widget ?

Thanks,

Abhishek

mania · ‎11-20-2023

@Abhi13

The below is the Widget code:

<div>

<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>

<table>

<tr>

<th>Saving</th>

<th>Sub-Total</th>

</tr>

<tr>

</tr>

<tr>

<th scope="row">Recurring (Annual)</th>

</tr>

</table>

</body>

</div>

Thanks!

Abhi13 · ‎11-20-2023

Hi @mania ,

I would suggest you to use contenteditable="true" for both th and td .

Please find below sample

<table>

<tr>

<th contenteditable="true"> </th>

<th contenteditable="true">Cost</th>

Thanks,

Abhishek