Getting started

Follow these steps to create a Singular widget:

Share your widget

1. Download the widget boilerplate

Open a console and enter following commands:

This set of commands creates a folder called myWidget on your local disk and clones the widget boilerplate into it. We recommend adding this folder to your source code management tool.

Description of default files

output.html boiler plate

2. Create a widget template in your Singular account

1. Log into Singular.live and check your permissions

To create a Singular.live widget, you need an account that has developer permissions. Check your permissions by navigating to the Singular Dashboard, selecting the User Menu > Settings, and checking your User Settings.

User Administration and Developer Tools should be switched on.

2. Create a new widget

Also on the Singular Dashboard:

1. Select the User Menu > Widget Manager, and then New Widget to create a new widget.

2. Enter a name and category for your widget.

3. Deploy your widget code

Continuing in the Widget Manager:

The file should look like this:

2. Upload the widget code to Singular using following command in the Node.js console:

The deploy script will read the deploy.json file, extract the deploy key, create a zip-file of the widget sources, and upload it to the Singular.live Cloud. Your widget then will be visible in the Widget Browser when you create a new widget instance.

Activate the Show Dev Versions checkbox in the Widget Browser to access the development version of your widget.

The status of the Development version of your widget gets updated every time you deploy new sources for your widget. Refresh the Widget Manager and select your widget to see to see its updated status.

Define the widget UI in the UI Definition field.

5. Test and debug your widget

Before you publish your widget, use Chrome's developer tools to debug and optimize it.

6. Publish your widget

When you're done testing your widget, use the publish function to make it available for other users.

The publish function creates an identical copy of the development version of your widget and tags it as published. When you do this, the development version gets increased by one.

Widgets never get deleted from the Singular.live platform. They are always in one of the following states:

development: Every new widget defaults to the development status. Widgets under development and can only be accessed by users with development permissions. Once your widget has been fully developed and tested, you can publish it to make it available to other users. Widgets with development status can be published.
published: A published widget is available to all members of your account. Only one published version of a widget can exist at the same time. By default, the latest published version will be used when creating an instance of a widget. Widgets with published status can be un-published.
archived: Widgets automatically get archived when a new version is published. Existing widget instances that use an older widget version will stay on the older version. A standard user can manually update the widget in the widget instance by selecting the Update button. Users with developer permissions can also use any archived version of an widget. Widgets with archived status can be published and depreciated.
depreciated: Set a widget to depreciated status when you want or need to force a widget instance to upgrade to the latest published version of an widget. A widget with depreciated status can be archived.