Add weburl column in table

smita.patil7 · April 28, 2023, 4:11pm

How to add url column inside the table so that if user click on it then it will redirect to web page.

sameera.tumuluri · May 10, 2023, 9:06pm

Hello @smita.patil7 ,

Do you need the column field itself to be clickable or simply add an hyperlinked URL in the field.

smita.patil7 · May 11, 2023, 11:04am

I need to add hyperlinked url…so when we click on url it will redirect to that particular page…

smita.patil7 · May 19, 2023, 8:39am

Hi, please help me with this

smita.patil7 · May 25, 2023, 6:33am

Please help to add web url.

swagata.sengupta · May 25, 2023, 8:32am

@smita.patil7
Hello Smita,
Just noticed this post. In normal table templates and mini table templates, there is no support for URLs.
You will need to use custom_table template that is available as an example on the GitHub repo

github.com

Koredotcom/web-kore-sdk/blob/master/UI/custom/customTemplate.js#L1804-L1835


      
          		/*custom table template 
          		var elements = [
          			{id: "1", name: "Peter", designation: "Producer", salary: 1000},
          			 {id: "2", name: "Sam", designation: "Director", salary: 2000},
          			 {id: "3", name: "Nick", designation: "DoP", salary: 1500},
          			  {id: "4", name: "Peter", designation: "Producer", salary: 1000},
          			  {id: "5", name: "Sam", designation: "Director", salary: 2000},
          			   {id: "6", name: "Nick", designation: "DoP", salary: 1500}
          			 ];
          			  var message = {
          				  "type": "template",
          				  "payload": {
          					  "template_type": "custom_table",
          					  "text": "Account details",
          					  "columns": [ ["Sl", "center"], ["Name"], ["Designation"], ["Salary", "right"] ],
          					   "table_design": "regular",
          						speech_hint: "Here is your account details",
          						elements: []
          					}
          				};

This file has been truncated. show original

The logic of rendering is here

github.com

Koredotcom/web-kore-sdk/blob/master/UI/custom/customTemplate.js#L1857


      
          				<table cellspacing="0" cellpadding="0">\
          					<tr class="headerTitle">\
          						{{each(key, tableHeader) msgData.message[0].component.payload.columns}} \
          							<th {{if tableHeader[1]}}style="text-align:${tableHeader[1]};"{{/if}}>${tableHeader[0]}</th>\
          						{{/each}} \
          					</tr>\
          					{{each(key, tableRow) msgData.message[0].component.payload.elements}} \
          						{{if tableRow.Values.length>1}}\
          							<tr {{if key > 4}}class="hide"{{/if}}>\
          								{{each(cellkey, cellValue) tableRow.Values}} \
          									<td {{if cellValue[1] == "button"}}class="clickableButton {{if cellValue[2].type == "web_url"}}clickableLink{{/if}}" type="${cellValue[2].type}" {{if cellValue[2].type == "web_url"}}url="${cellValue[2].url}"{{/if}} payload="${cellValue[2].payload}"{{/if}} {{if cellkey === tableRow.Values.length-1}}colspan="2"{{/if}} id=" {{if key == 0}} addTopBorder {{/if}}" {{if msgData.message[0].component.payload.columns[cellkey][1]}}style="text-align:${msgData.message[0].component.payload.columns[cellkey][1]};" {{/if}} title="${cellValue[0]}">${cellValue[0]}</td>\
          								{{/each}} \
          							</tr>\
          						{{/if}}\
          					{{/each}} \
          				</table>\
          			</div>\
          			{{if msgData.message[0].component.payload.elements.length > 5 && msgData.message[0].component.payload.table_design && msgData.message[0].component.payload.table_design == "regular"}}<div class="showMore">Show more</div>{{/if}}\
          		</div>\
          		 <div class="accordionTable {{if msgData.message[0].component.payload.table_design && msgData.message[0].component.payload.table_design == "regular"}}hide{{else}}responsive{{/if}}">\
          			{{each(key, tableRow) msgData.message[0].component.payload.elements}} \

Note

It is expected that the developer has HTML/JS/CSS skills to be able to customize this further.
This will work with only Kore.ai webSDK. Not for other channels. So, on the bot also, please select the channel as web/mobile client.

swagata.sengupta · May 25, 2023, 10:32am

@smita.patil7
You may also use tableList template

github.com

Koredotcom/web-kore-sdk/blob/master/UI/custom/customTemplate.js#L901-L1054


      
          var message={
          	"type": "template",
          	"payload": {
          				"template_type": "tableList",
          				"title":"Marvel Comics",
          				"description":"Marvel Worldwide Inc.",
          				"headerOptions":{
          					"type":"text",
          					"text":"Comics",
          				},
          
          

          
	"elements":[
          		{
          			"sectionHeader":"Marvel Comics",
          			"sectionHeaderDesc":"It is a story book",
          			"rowItems":[
          				{
          					"title":{
          						"image":{

This file has been truncated. show original

You will have many more customization options for this.