Creating a button that shows based on Referral URL

[Staxed]

I have a widget that shows on a Service Portal page and I'm wondering if it is possible to edit the links to only show based on a specific referral url.  Is this possible to do?

Right now, it shows 3 buttons, but I would like for it to only show 1 based on the referral url.  These buttons are on the "show all ideas" page that you are forwarded to after filling out an idea catalog form.  We have 3 forms, and I'm hoping to be able to customize the button that shows based on which form the person submitted.  Hopefully that makes sense.

Currently all 3 forms go to this page after submission: sninstance.com/sp?id=ideas_list&sysparm_module_id=internal

I'm editing the widget that shows the buttons via the widget editor, current code is:

HTML

<div class="ideas-list-filler--wrpr" ng-if="data.moduleExists">
  <div class="create-idea-cntr">
    <h3 class="idea-creation--title m-t-sm h4">${Have an Idea? Share it!}</h3>
    <div class="idea-creation-btn-cntr">
      <a class="btn btn-primary" role="button" ng-href="?id=sc_cat_item&sys_id=ac9ee6dfdb206450a2215278dc9619e9" >${Create an Innovation Idea}</a>
    </div>
    <div class="idea-creation-btn-cntr">
      <a class="btn btn-primary" role="button" ng-href="?id=sc_cat_item&sys_id=7bfa9f0e1b49b4d0461ea687b04bcbb6" >${Create an IS Idea}</a>
    </div>
    <div class="idea-creation-btn-cntr">
      <a class="btn btn-primary" role="button" ng-href="?id=sc_cat_item&sys_id=33d34974db6449506647c4f3399619e8" >${Create a Data and Analytics Idea}</a>
    </div>
  </div>
</div>

Client Script

function() {
  /* widget controller */
  var c = this;
}

Server Script

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

	data.moduleId = $sp.getParameter('sysparm_module_id') || options.moduleId;
	if(JSUtil.nil(data.moduleId))
		data.moduleId = IMCommonService.getModuleIdFromUserPref();
	if(JSUtil.nil(data.moduleId)){
		data.moduleExists = false;
		return;
	}

	if(data.moduleId) {
		data.moduleInfo = IMCommonService.getModuleInfoFromModuleId(data.moduleId);
		data.moduleExists = data.moduleInfo && data.moduleInfo.sysId ? true : false;
	} else {
		data.moduleExists = false;
	}

})();

[Luke Van Epen]

2 ways to deal with this,

First would be to evaluate which of the 3 links you want to display in the Server Script, and then store the Link and the Button text in variables. Then, only have 1 button in the HTML, which accesses these variables to load the link and button text.

This is a much more scalable solution than what you have currently, as it allows you to infinitely add new links/button labels without copy/pasting html repeatedly, which might become a maintenance problem later in case you need to update the other HTML properties for each button.

2nd, is to evaluate which button to display server side, and store this in a variable, then use "ng-if" attribute on the div wrappers for each button, to show/hide each button.

In both cases you need to write a server-side script that evaluates which button to show, so i would recommend refactoring your code into the 1st approach while it's relatively small and easy to do.