UI html panel

Revision as of 21:16, 4 January 2014

This command is a UI Command. This command creates a blank panel in the ui area in which you can use html, css, and javascript to design your own ui.

The command is used for the creation of custom fields, checkboxes, drop downs and other html elements.

HTML: The HTML for the UI elements being created.

Height In Pixels: The height of the UI area being created for the HTML UI elements.

Examples

Custom created fields are assigned variables that are used to integrate with the rest of your script in UBot Studio.

ui html panel("<input type=\"checkbox\" variable=\"#myvar2\" fillwith=\"checked\"><input type=\"text\" variable=\"#myvar\" fillwith=\"value\">", 135)
navigate("http://www.ubotstudio.com/playground/simple-form", "Wait")
type text(<username field>, #myvar2, "Standard")
type text(<first name field>, #myvar, "Standard")

Running the script inserts the values of the checkbox and the text box into the specified fields with the type text command.

This example is for populating a drop down menu or list on the UI:

clear list(%options)
add list to list(%blue, $list from text("one,two,three,four", ","), "Delete", "Global")
loop($list total(%blue)) {
    add item to list(%options, "<option value=\"\">{$next list item(%blue)}</option>", "Delete", "Global")
}
ui html panel("<select>{$text from list(%options, "")}</select>", 135)

The options tags are created with information pulled from another list that contains the values needed for the drop down list.

A list is created with the options tags needed to create the option in the drop down list.

The html for the dropdown values are then inserted into the UI html with surrounding select tags.

Running the script will create a drop down list on the UI.

Save File

To create a an Save File dialog, you can edit the html from the UI editor and replace input type="file" with input dialogtype = 'save'.

<input dialogtype='save' type="file" id="FileChooser0" class="FileChooser0 FileChooser0input" variable="#FileChooser0" />

The dialog that appears after clicking the browse button will be a save as dialog instead of an open file dialog.