How to add Form that has Tabs and Related List within Service Portal

[reginabautista]

Hi guys, apologies for bombarding the community with a lot of questions but I am new to ServiceNow and have only started playing around Service Portal.

I need to call a Form that has tabs and related lists within the Service Portal. At the moment I created a widget that has an IFRAME that displays the Form. I know this is not ideal and most importantly not responsive. Is there any other way to do this within the Service Portal?

I am unable to use the URL to load a form as specified in my issue below as it displays all the tabs all at once making the form too lengthy. I would really appreciate any help on this. Thanks very much.

Rendering Form within Service Portal for custom table not working

Thanks

Regina

[Paul Porter]

Hi Nathan,

Thanks for your submissions and replies in this thread.  Were you guys able to make any headway on Tabular sections in Task based form views in the Portal?

Thanks,

~Paul

[Cuong Phan]

Hi Regina,

Please try this.

HTML

<div>
  <ul class="nav nav-tabs">
    <li ng-repeat="item in data.related_lists" 
        ng-class="( == 0)? 'active': ''"
        ng-click="c.refreshData(item)"><a data-toggle="tab" href="" >{{item.label}}</a></li>

  </ul>
  <div class="tab-content" >
    <div id="contacts" class="tab-pane fade in active">
      <sp-widget ng-if="data.dataTableWidget" widget="data.dataTableWidget"></sp-widget>
    </div>

  </div>
</div>

Client Script

function($scope,spUtil) {
  /* widget controller */
  var c = this;
	
	
	c.refreshData = function(item) {
		var params = $scope.data.optionList;
		var recordId = $scope.data.sys_id;
		params.table = item.table;
		params.filter = item.field+'='+recordId;
		spUtil.get('widget-data-table',params).then(function(response){
			$scope.data.dataTableWidget = response;
		});
	};
	
	
}

Server:

(function() {
  /* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	data.table = $sp.getParameter('table');
	data.sys_id = $sp.getParameter('sys_id');
	data.query = '';
	data.view = $sp.getParameter('view');
	data.f = $sp.getForm(data.table, data.sys_id, data.query, data.view);
	data.related_lists = data.f._related_lists;
	data.optionList = {};
	
	if (!input) {
		loadData(data.related_lists[0].table,data.related_lists[0].field);
	}
	
	
	function loadData(table,field) {
		data.optionList.table = table;
		data.optionList.filter = field+'='+data.sys_id;
		data.optionList.show_breadcrumbs=true;
		data.optionList.show_keywords= true;
		data.dataTableWidget = $sp.getWidget('widget-data-table', data.optionList);
		console.log(data.dataTableWidget)
	}
})();

Output:

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

Cuong Phan

DXC Consultant.

[GTSPerformance]

Caution, the free related list widget provided by NewRocket has a bug that can potentially cause performance degradation. See https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1561435