The items that you drag-and-drop into your app are called "widgets". These can be buttons, images, input boxes, and anything else available from the drop down lists at the top of the app editor.
Custom widgets allow you to write your own code and create your own widgets that you can then drag-and-drop onto your application and interact with. This capability allows Tulip users to stretch the boundaries of what is possible in Tulip.
In this article, we'll give you a quick overview of how custom widgets work.
Custom Widget Basics
The custom widget management screen can be found within your account settings page. This is where you can create and delete widgets. The custom widget editor allows you to write your widget code, create Props and Events, and preview your widget. Below is a diagram describing what props and events are:
Props: Props are data that are shared between custom widgets and Tulip applications. Props will be exposed in the application editor and will allow app editors to select which variables, table records, or other information to associate with the prop.
Events: Events are signals that your widget can send to your application. Events allow your application to respond with a trigger and can carry information along with them.
Custom widgets are accessible through the Widgets drop down selector in the App Editor.
Creating a Widget
The widget editor screen is broken down into four sections. Code that you write in the bottom left section will appear in the preview section once you click into the preview section. Prop values can be changed directly in the preview section for testing purposes.
Special functions for interacting with props and events.
Getting the Value of a Prop
Setting the Value of a Prop
setValue('My Prop', value_to_set);
Fire an event
Example widget build video
From the custom widget overview, select the 3 dots next to the widget you want to export.
From the custom widget overview screen, select the 3 dots at the top.
Find the .json custom widget file.
Enabling External Libraries
While in your widget, click on the 3 dot menu in the ribbon.
Select "Enable External Library".
Select the extension you want to enable.
Here is a basic description of what each of these do, many of them excel in many areas, so feel free to explore.
jQuery - enables more streamlined selection of html elements, along with element manipulation.
D3 - The gold standard for visualization of data, a steep learning curve but tons of flexibility.
Google Visualization - A great tool for doing as the name implies, visualization.
javaascript-Ip-solver - Ip solver is an external library that can handle complex computations to solve equations.
ChartJS - About the simplest graphing library possible with tons of online resources.
Moment - Moment provides tons of tools to work with dates and times.