Clicking Modal Widget has no link, void(0)

Mohammed Kemal
Tera Guru

Hi,

I have a service portal that has a modal widget. I have added the link properly but when I click to test it the result is void(0). To verify I copied the link and tried to open in a new tab but it is void(0). Overall is not brining the URL link I have in the widget. I appreciate any help to resolve this issue??

find_real_file.png

find_real_file.png

4 REPLIES 4

amaradiswamy
Kilo Sage

Hi,

I think it is a custom widget. To provide better suggestions, can you paste the code? Also, remove if there is any confidential or proprietary code. 

Mohammed Kemal
Tera Guru

Here is the code 

find_real_file.png

HTML

<div>
  <!--// Top Icon -->
  <a href="javascript:void(0)" ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-click="c.openFormModal()" class="top_icon {{::options.class_name}} link" target="{{::data.target}}">
    <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
    <h3>{{::options.title}}</h3>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Circle Icon -->
  <a href="javascript:void(0)" ng-if="::(options.link_template == 'Circle Icon')" ng-click="c.openFormModal()" class="circle_icon {{::options.class_name}} text-{{::options.color}} link" target="{{::data.target}}">
    <span class="fa fa-stack fa-2x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
    </span>
    <h3>{{::options.title}}</h3>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Color Box -->
  <a href="javascript:void(0)" ng-if="::(options.link_template == 'Color Box')" ng-click="c.openFormModal()" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white link" target="{{::data.target}}">
    <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
    <h3>{{::options.title}}</h3>
    <span>{{::options.short_description}}</span>
  </a>
   <div id="modal_instance_container">
		<sp-widget widget="c.modalInstance" ng-if="c.modalInstance"></sp-widget>
  </div>
</div>

 

CSS

 

 

/* TOP ICON ---------- */

a.top_icon {
  display: block;
  padding: 20px;
  text-align: center;
}

a.top_icon .fa {
  display: block;
  text-align: center;
}

a.top_icon h3 {
  font-weight: 300;
  padding: 0;
  margin: 0 0 10px 0;
}

/* CIRCLE ICON ---------- */

a.circle_icon {
  display: block;
  padding: 20px 0px 20px 70px;
  position: relative;
}

a.circle_icon .fa {
  position:absolute;
  left: 0px;
  top: 10px;
}

a.circle_icon h3 {
  font-weight: 300;
  padding: 0;
  margin: 0 0 10px 0;
}

/* COLOR BOX ---------- */

a.color_box {
  display: block;
  position: relative;
  padding: 20px 20px 20px 82px;
  border-radius: 4px;
  margin-bottom: 20px;
}

a.color_box .fa {
  position:absolute;
  left: 20px;
  top: 20px;
  width:42px;
  text-align: center;
}

a.color_box h3 {
  font-weight: 300;
  padding: 0;
  margin: 0 0 10px 0;
}

.icon-link-background-primary {
  background-color: $brand-primary;
}

.icon-link-background-info {
  background-color: $brand-info;
}

.icon-link-background-success {
  background-color: $brand-success;
}

.icon-link-background-warning {
  background-color: $brand-warning;
}

.icon-link-background-danger {
  background-color: $brand-danger;
}

.icon-link-background-default {
  background-color: $brand-primary;
}

.link {
  cursor:pointer;
}

Server script

(function(){
	var gr = $sp.getInstanceRecord();
	//data.href = $sp.getMenuHREF(gr);
	data.target = options.target || "";
	data.table = options.table_name;
	data.view = options.view;
	data.query = options.query;
	data.sys_id = options.record_sysid;
})();

Client controller

function($scope, $rootScope, $location, $window, spUtil) {
	/* widget controller */
	var c = this;
	c.openFormModal = function(type) {
		var myCtrl;
		c.modalInstance = undefined;
		var data = {
			embeddedWidgetId: 'widget-form',
			embeddedWidgetOptions: {
				table: c.data.table,
				sys_id: c.data.sys_id || -1,
				query: c.data.query,
				view: c.data.view
			}
		};
		
		spUtil.get('widget-modal', data).then(function(widget){
			widget.options.afterClose = function(){
				c.modalInstance = undefined;
			};
			widget.options.afterOpen = function(controller){
				myCtrl = controller;
			};
			c.modalInstance = widget;
		});
		
		var unregister = $scope.$on('sp.form.record.updated', function(event, savedOptions){
			closeModal();
			$rootScope.$broadcast('apm-'+c.options.table_name+'-created');
		});
		
		function closeModal(){
			if(myCtrl)
				myCtrl.close();
			if(c.modalInstance)
				c.modalInstance = undefined;
			/* Hack to prevent widget-form adding recently created record sys_id in url */
			var params = $location.search();
			if(params.sys_id || params.spa) {
				if(params.sys_id)
					delete params.sys_id;
				if(params.spa)
					delete params.spa;
				$location.search(params).replace();
			}
		}
	};
}

Hi, 

Try with below

<div>
  <!--// Top Icon -->
  <a ng-href="{{::data.target}}" ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-click="c.openFormModal()" class="top_icon {{::options.class_name}} link" target="{{::data.target}}">
    <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
    <h3>{{::options.title}}</h3>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Circle Icon -->
  <a ng-href="{{::data.target}}" ng-if="::(options.link_template == 'Circle Icon')" ng-click="c.openFormModal()" class="circle_icon {{::options.class_name}} text-{{::options.color}} link" target="{{::data.target}}">
    <span class="fa fa-stack fa-2x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
    </span>
    <h3>{{::options.title}}</h3>
    <span class="text-muted">{{::options.short_description}}</span>
  </a>

  <!--// Color Box -->
  <a ng-href="{{::data.target}}" ng-if="::(options.link_template == 'Color Box')" ng-click="c.openFormModal()" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white link" target="{{::data.target}}">
    <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
    <h3>{{::options.title}}</h3>
    <span>{{::options.short_description}}</span>
  </a>
   <div id="modal_instance_container">
		<sp-widget widget="c.modalInstance" ng-if="c.modalInstance"></sp-widget>
  </div>
</div>

Mohammed Kemal
Tera Guru

Hi Amaradiswamy,

I have tried with the above code but did not work.

find_real_file.png