Published on June 15, 2022.

Over the past several months, I've written about the work that I've been doing in Tulip. Tulip is a cloud-based, no-code platform that empowers citizen developers to build Manufacturing Execution Systems (MES) apps.

I was introduced to Tulip by one of my clients. They've been using Tulip to develop custom apps that automate and monitor their manufacturing operations. Nearly all of their Tulip apps integrate with NetSuite, and that's why I got involved with it. And I'm so glad I did, because it has made me aware of the exciting work being done in the advanced manufacturing space, and in Industry 4.0 in general.

Tulip Plugins

In April, Tulip added support for plugins. This gives users the ability to create their own custom Widgets (the components that users drag-and-drop to build apps) and custom Connectors (which are used to integrate Tulip apps with external systems and databases). Support for plugins made Tulip, which was already an amazingly powerful no-code platform, even more compelling.

I recently had an opportunity to explore Tulip's plugin support - and its support of custom Widgets in particular - and was amazed at how easy and powerful the functionality is.

You create custom widgets by combining HTML, Javascript, and CSS. But what makes custom widgets so powerful are their support for properties ("props") and events. Props are the properties that a user can set in Tulip's App Editor, which the widget uses to conditionally generate content. And with events, users can add triggers to a widget and respond as events occur.

Here's an animation showing what a Tulip widget looks like in the widget editor.

Click the image to view a larger version.

So far, I've developed two custom widgets. Both are content-related, and I've developed them to help make my Tulip / NetSuite integration work a little easier. In this post, I'll discuss and share one of those widgets.

The DataTable Widget

The DataTable widget uses the DataTables jQuery Javascript library to generate an HTML table with advanced interaction controls, including pagination, keyword searching, sorting, and more.

Here's a short animation showing the Datatable widget in a Tulip app, running in the Tulip Player.

Click the image to view a larger version.

To use the widget, you pass it either an HTML table or a JSON array.

If you pass an HTML table, then the widget will use the DataTables library to add the advanced interaction controls. To pass an HTML table, set the widget's "HTML Table" property.

If you pass a JSON-encoded array, then the widget will automatically generate an HTML table for you, and then use the DataTables library to add the advanced interaction controls. To pass an array, set the widget's "JSON Array" property.

You can indicate that you do not want the advanced interaction controls to be added, in which case the widget will simply generate the HTML table. To do so, set the "Generate DataTable" property to "no."

You can also specify options that you'd like to have applied to the Datatable. For example, you can specify the initial pageLength (the number of rows to shown per "page" ), the options for the number of rows per page, and so on. To specify these options, simply pass a JSON-encoded object, such as this:

{ "pageLength": 10, "lengthMenu": [ 5, 10, 15, 20, 25, 50, 75, 100, 250, 500, 1000 ] }

For more information on the options that DataTables supports, visit https://www.datatables.net/manual/options.

Here's a screen shot of a configured DataTable widget instance. In this example, the JSON Array property is being sourced from a static value, but it could just as easily be sourced from a variable.

Click the image to view a larger version.

Event Support

The DataTable widget supports a "Link Clicked" event.

When passing the widget a JSON array, you can specify the column name (key) to automatically wrap in a hyperlink, and the widget will take it from there.

For example, suppose that your JSON array looks like this.

[
     {
          "lastname": "Abernathy",
          "firstname": "Kevin",
          "employeeid": 19,
          "phone": null,
          "email": "kabernathy@test.com"
     },
     {
          "lastname": "Ackbury",
          "firstname": "Eric",
          "employeeid": 119,
          "phone": null,
          "email": "erica@test.com"
     }
]

To have the widget add links to the values of the "employeeid" column, you would set the "Link Column" property to "employeeid."

If you are passing the widget an HTML table, you can manually wrap values as hyperlinks. For example:

<tr>
	<td><a href="#" onclick="fireEvent( 'Link Clicked', 'Tiger Nixon' ); return false;">Tiger Nixon</a></td>
	<td>System Architect</td>
	<td>Edinburgh</td>
	<td>61</td>
	<td>2011-04-25</td>
	<td>$320,800</td>
</tr>

You could then add a trigger on the widget, capture the value that was clicked, and do something with it. For example, you could store the value in a variable, transition to another step, load the employee's record via a connector function, and display the detailed employee information.

Here's a screen shot of a trigger added to a DataTable widget, which simply displays the value of the link that was clicked.

Click the image to view a larger version.

Downloading the Widget

To download the DataTable custom widget, click here:
customWidget-DataTable-v1.1.json

To install the widget, log into your Tulip account, navigate to Settings, select Custom Widgets, click the "..." button (located in the top right corner of the window), and select Import.

Wrapping Up

My goal with the DataTable widget is to be able to take data retrieved from NetSuite - such as a list of Work Orders - and display it in a simple, clean, user-friendly way. But the widget can be used to display data from nearly any source.

If you have any comments, questions, or suggestions about the widget, please feel free to get in touch.