community Alteryx IO Mission Control
alteryx Community
Search
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Close
Free Trial

Dev Space

Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
SOLVED

Help in developing HTML Gui for service-now Connector

joeGade
10 - Fireball
‎03-02-2020 09:54 AM

Hello Alteryx Dev Gurus @NeilR  @tlarsen7572  @Coxta45 @SeanAdams  @JosephSerpis 

I am trying to develop a Service-now Connector to download the Full data and Incremental data (CDC) via service-now table API. I got the App working but want to enhance the tool by creating HTML GUI using SDK. I created a .yxi file with all inputs and output but it's not working. Attached is the .yxi file. .Although I have inputs configured I am not able to see in UI  on alteryx Designer after install .

 

Please re-name the attachment from .zip to .yxi (some issues uploading as .yxi)

 

HTML SDK GUI  after install . 

gade_joseph_r_0-1583171097319.png 

 

Alteryx macro Config. 

 

gade_joseph_r_1-1583171131476.png

 

Alteryx Macro GUI 

gade_joseph_r_2-1583171196119.png

 

 

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>XMSG("ServiceNow Data API")</title>
<script type="text/javascript">
// Include the base GUI library.
document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
</script>
<link rel="stylesheet" href="./assets/styles.css">
<style type="text/css">
.alteryx-button {
float: right;
}
</style>

</head>

<body>

<!-- <script type="text/javascript" src='Service-now_app.js'></script> -->

<!-- Fieldset to capture user credentials -->
<fieldset>
<legend>Service-now Credentials</legend>

<label>XMSG("Instance")</label>
<ayx data-ui-props='{type:"TextBox", widgetId:"Instance"}' data-item-props='{dataName:"Instance", dataType:"SimpleString"}'></ayx>
<label>XMSG("Username")</label>
<!-- <alteryx-pluginwidget type="TextBox" id="username" dataName="username" onkeyup="enableConnect();"></alteryx-pluginwidget> -->
<ayx data-ui-props='{type:"TextBox", widgetId:"Username"}' data-item-props='{dataName:"Username", dataType:"SimpleString"}'></ayx>

<label>XMSG("Password")</label>
<!-- <alteryx-pluginwidget type="TextBox" id="password" dataName="password" password="true" onkeyup="enableConnect();"></alteryx-pluginwidget> -->
<ayx data-ui-props='{type:"TextBox", widgetId:"Password"}' data-item-props='{dataName:"Password", dataType:"SimpleString", password:true}'>
<br/>

<label>XMSG("Table")</label>
<ayx aria-label="Table-dropdown" data-ui-props='{type:"DropDown", widgetId:"Table", searchable:true, allowCustomValue: True, placeholder:"XMSG("Select Table...")", clearable:true}' data-item-props='{dataName:"Table", dataType:"StringSelector"}'></ayx>
<br />
<label>XMSG("Sysparm_limit")</label>
<ayx aria-label="Sysparm_limit" data-ui-props='{type:"NumericSpinner", widgetId:"Sysparm_limit", data-item-props='{dataName:"Sysparm_limit", dataType:"ConstrainedInt" ,value:"1000"}'></ayx>
<br />
<br />
<label>XMSG("Query")</label>
<ayx data-ui-props='{type:"TextBox", widgetId:"Query"}' data-item-props='{dataName:"Query", dataType:"SimpleString"}'></ayx>

</fieldset>
<div id="loading" class="loading" style="display:none;"></div>
<div aria-label="loading-spinner" id="loading-inner" class="loading-inner" style="display:none;">
<img src=".\assets\loading_ring.svg">
</div>
</body>

</html>

 

servicenow.zip
Labels:
Reply

Accepted SolutionSolved! Go to Solution.

9 REPLIES 9
NeilR
Alteryx Alumni (Retired)
‎03-02-2020 10:48 AM

@joeGade 

 

I found two syntax errors in your HTML code that were preventing it from rendering. After fixing, it rendered...

The first is with this line:

<ayx aria-label="Sysparm_limit" data-ui-props='{type:"NumericSpinner", widgetId:"Sysparm_limit", data-item-props='{dataName:"Sysparm_limit", dataType:"ConstrainedInt" ,value:"1000"}'>

Here, you're missing a curly brace, I changed it to:

<ayx aria-label="Sysparm_limit" data-ui-props='{type:"NumericSpinner", widgetId:"Sysparm_limit"}' data-item-props='{dataName:"Sysparm_limit", dataType:"ConstrainedInt" ,value:"1000"}'></ayx>

 

The second problem line was an improperly capitalized T in the boolean true:

<ayx aria-label="Table-dropdown" data-ui-props='{type:"DropDown", widgetId:"Table", searchable:true, allowCustomValue: True, placeholder:"XMSG("Select Table...")", clearable:true}' data-item-props='{dataName:"Table", dataType:"StringSelector"}'></ayx>

Changed to:

<ayx aria-label="Table-dropdown" data-ui-props='{type:"DropDown", widgetId:"Table", searchable:true, allowCustomValue: true, placeholder:"XMSG("Select Table...")", clearable:true}' data-item-props='{dataName:"Table", dataType:"StringSelector"}'></ayx>

 

Reply
NeilR
Alteryx Alumni (Retired)
‎03-02-2020 10:55 AM

FYI, in general, following the directions here (Debugging the CEF) are very helpful for debugging HTML GUI SDK code. [In this particular case, not quite as helpful. I identified the offending two lines of code by commenting out blocks of code until the bad lines revealed themselves.]

Reply
joeGade
10 - Fireball
‎03-02-2020 11:06 AM

Thanks @NeilR  Works Perfect. Thanks for Quick Reply. 

Reply
NeilR
Alteryx Alumni (Retired)
‎03-02-2020 11:09 AM

Happy to help! Well done getting to within a couple lines of a working custom tool 🙂

 

In regards to the issue you had attaching a YXI... This has been a known issue for some time. I just checked with our development team, and happy to report that it looks like we finally have a fix in place for this which should be getting deployed within a couple days.

Reply
joeGade
10 - Fireball
‎03-02-2020 11:14 AM

Thank you . @NeilR  .  for  Section named 'Table'  which is a dropdown on GUI I don't see Dropdown values as I see in the Macro? how can we get the values to drop down for selection . ? Do we have to Write a java script . if so do you have an example that I can use . 

 

I am totally new to scripting js or any kind of language .....

 

gade_joseph_r_0-1583176349389.png

 

gade_joseph_r_1-1583176368210.png

 

 

 

 

Reply
0 Likes
NeilR
Alteryx Alumni (Retired)
‎03-02-2020 02:12 PM

Yes you'll need to write some JavaScript. The relevant example is in the HTML - GUI Library tool that's shipped with Designer in the SDK Examples category. You can find the code in the [alteryx install]\bin\HtmlPlugins\HtmlGuiSdk\HtmlGuiSdkGui.html file.

 

Essentially, you'd change your HTML code to:

<ayx data-ui-props='{type:"DropDown", widgetId:"Table", searchable:true, placeholder:"Select Table...", clearable:true}'></ayx>

and then add the following JS:

Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
   var stringSelector = new AlteryxDataItems.StringSelector('Table', {
   optionList: [
      {label: "Alpha", value: "alpha"},
      {label: "Beta", value: "beta"},
      {label: "Gamma", value: "gamma"}
    ]
   })
   manager.addDataItem(stringSelector)
   manager.bindDataItemToWidget(stringSelector, 'Table')		
}

 

If you haven't read it already, Building an HTML Macro offers a good primer of how all these pieces work together. Full HTML here:

<html>
<head>
    <meta charset="UTF-8">
    <title>XMSG("ServiceNow Data API")</title>
    <script type="text/javascript">
        // Include the base GUI library.
        document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
    </script>
</head>

<body>
    <fieldset>    
      <legend>Service-now Credentials</legend>
	  <label>XMSG("Instance")</label>
         <ayx data-ui-props='{type:"TextBox", widgetId:"Instance"}' data-item-props='{dataName:"Instance", dataType:"SimpleString"}'></ayx>
        <label>XMSG("Username")</label>
		  <ayx data-ui-props='{type:"TextBox", widgetId:"Username"}' data-item-props='{dataName:"Username", dataType:"SimpleString"}'></ayx>
        <label>XMSG("Password")</label>
		  <ayx data-ui-props='{type:"TextBox", widgetId:"Password"}' data-item-props='{dataName:"Password", dataType:"SimpleString", password:true}'>
          <br/>
    
		  <label>XMSG("Table")</label>
           <ayx data-ui-props='{type:"DropDown", widgetId:"Table", searchable:true, placeholder:"Select Table...", clearable:true}'></ayx>
		  <br />
		  <label>XMSG("Sysparm_limit")</label>
			<ayx aria-label="Sysparm_limit" data-ui-props='{type:"NumericSpinner", widgetId:"Sysparm_limit"}' data-item-props='{dataName:"Sysparm_limit", dataType:"ConstrainedInt" ,value:"1000"}'></ayx>
		<br />
		<br />
		  <label>XMSG("Query")</label>
			<ayx data-ui-props='{type:"TextBox", widgetId:"Query"}' data-item-props='{dataName:"Query", dataType:"SimpleString"}'></ayx>
    </fieldset> 

	<script>
		Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
			var stringSelector = new AlteryxDataItems.StringSelector('Table', {
			  optionList: [
				{label: "Alpha", value: "alpha"},
				{label: "Beta", value: "beta"},
				{label: "Gamma", value: "gamma"}
			  ]
			})
			manager.addDataItem(stringSelector)
			manager.bindDataItemToWidget(stringSelector, 'Table')		
		}
	</script>
	
</body>
</html>
Reply
TreyW
Alteryx Alumni (Retired)
‎03-06-2020 10:15 AM

@joeGade 

 

Happy Friday! As @NeilR mentioned, we've resolved the issue with the .yxi file type (along with a few other file types as well). I've tested this in a couple posts and it's working great - but please don't hesitate to let me know if you run into any further issues with that file type or others! 

 

 

 

________________________________________________________

Senior Manager, Community Platform + Operations at Alteryx

 

Reply
joeGade
10 - Fireball
‎03-09-2020 11:37 PM

Service Now Connector is now available to download from Alteryx Public Gallery Here is the Link.

 

https://gallery.alteryx.com/#!app/Servicenow-Download/5e6731418a93370990b2a835

 

Reply
0 Likes