{WIP} About the Prefab API

As your automation script runs, the Wranggle browser extension shows a "prefabricated" user interface in its popup, a UI that you control with the API documented here, referenced in your automation script on runner.prefab.

This Prefab API offers a convenient and productive way to interact with the user from your script, collecting their preference settings, offering them command buttons, and prompting them for information.

User Interface Alternatives
If you need a more advanced UI, you can instead create a custom user interface.

And of course, your automation script does not need to use the popup at all — you can interact with the user directly in the content page. (In the future we hope to offer utilities and libraries to also help with this.)

Overview

Form Builder

Form Builder

{todo}

Main Menu

prefab.mainMenu instructs the UI to

Primary Methods:

addButton Add a new button
clearMenu Remove all buttons.
setTitle. Change the default header (from "Commands")
setDescription. Add descriptive text under the menu header.

Secondary Method(s):

removeButton Remove a specific button

Notes:

To replace an existing button, call addButton with an identical name value

addButton

Adds a button to the menu.

// Simple Usage:
prefab.mainMenu.addButton('Do Stuff', () => doStuff());

// Syntax:
 prefab.addButton('requiredButtonText', { optionalOptions }, requiredOnClickFunction);

The requiredOnClickFunction callback is not passed any parameters.

Primary options:

name string: Id that is used for updating or removing an existing button.
sortScore integer: The value used when sorting the buttons in ascending order. If not set, buttons are displayed in order added. note: the default is set with: sortScore = numberOfAlreadyExistingButtons * 100 + 1000

Form-like display options:

label string: Control label text, displayed above the button.
description string: Descriptive text displayed under the label. (Requires label option is present.)
help/helpBlock string: Form-like help block, displayed under the button.

Styling options are passed through to react-bootstrap:

size string:
style string:
disabled boolean:

clearMenu

{todo}

User Settings

{todo}

todo: slug: editable-grid

Alerts

{todo}

Reports

{todo}

prefab.reportTable

Additional Functionality

{todo}

Extending Prefab UI

custom UI
import/require @wranggle/prefab-ui