Introduction

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

getValue('My Prop');

//Store prop to a variable

let myVariable = getValue('My Prop');
//Do something anytime a prop value changes

getValue('My Prop', (internalVariable) => {
doSomething(internalVariable);
});

Setting the Value of a Prop

setValue('My Prop', value_to_set);

//Set value of a text prop to 'hello!'

setValue('My Text Prop', 'hello!');
//set value of an item in an object

setValue('My Object Prop', { 'Key inside object': 'new value' });

Fire an event

fireEvent('event', payload);

//fire an event with no payload

fireEvent('My Event');
//fire event with payload

fireEvent('My Event', myVariable);

Example widget build video


Importing/Exporting Apps

Export

  1. From the custom widget overview, select the 3 dots next to the widget you want to export.

  2. Select "Export".

Import

  1. From the custom widget overview screen, select the 3 dots at the top.

  2. Select "Import".

  3. Find the .json custom widget file.

Enabling External Libraries

External libraries further extend what custom widgets can do. External libraries handle lots of the dirty work of writing html directly in JavaScript. External libraries must be enabled for each widget where you want to use them.

  1. While in your widget, click on the 3 dot menu in the ribbon.

  2. Select "Enable External Library".

  3. 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.

  • Lodash - Lodash provides a ton of tools that make working with javascript datatypes easier.

  • ChartJS - About the simplest graphing library possible with tons of online resources.

  • Moment - Moment provides tons of tools to work with dates and times.

Did this answer your question?