Advent of Code is now back for a limited time only! Complete as many challenges as you can to earn those badges you may have missed in December. Learn more about how to participate here!
community Alteryx IO MyAlteryx
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

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