Skip to content

Script Examples

Exporting Variables and Functions from Components and Libraries

UI Builder can now support calling Functions and Variables from Components and Libraries, to do this. Users need to export the following variables and functions to be exposed.

In the example below, we created the main UI(ExportVariableandFunctions_TemplateUI) that have 1 Component(MyComponent) and 1 Library(MyLibrary) attached to it.

ExportVariableandFunctions_TemplateUI is the main UI that houses the Component and Library that we use. the UI also contains 4 buttons that displays the exported function and exported variable to the Textbox.

MyComponent is a attacheable UI component that takes in a Name, then send it back to the Main UI, it also contains a stored variable named myComponentVariable.

MyLibrary also contains a function that takes in the value taken from the MyComponent and displays it to the Main UI. It also has a stored variable called MyLibraryVariable.

exportFunctionVariable

Download ZIP File

ExportVariableandFunctions_TemplateUI.ezui 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// Display the Name entered from the ComponentUI by using Component function
BT_SendName.onClick = () => {
  TI_displayVariable.value = myComponent.displayNameComponent(myComponent.TB_Name.value);
};

// Display the variable named "myComponentVariable" from a ComponentUI
BT_displayComponentVar.onClick = () => {
  TI_displayVariable.value = myComponent.myComponentVariable;
}

// Display the Name entered from the ComponentUI by using Library function
BT_displayLibraryFunction.onClick = () => {
  TI_displayVariable.value = MyLibrary.displayNameLibrary(myComponent.TB_Name.value);
}

// Display the variable named "MyLibraryVariable" from a Library(script)
BT_displayLibraryVar.onClick = () => {
  TI_displayVariable.value = MyLibrary.MyLibraryVariable;
}

MyComponent.ezui 

1
2
3
4
5
export function displayNameComponent(name: string){
  console.log("Hi,", name, " I am a Component Function");
  return "Hi,"+ name + " I am a Component Function";
}
export const myComponentVariable = "Hi, I'm a component variable";

MyLibrary.ezui 

1
2
3
4
5
6
export function displayNameLibrary(name: string){
console.log("Hello,", name,". I am a Library Function")
return "Hello,"+ name +". I am a Library Function"
}

export const MyLibraryVariable = "Hello, I'm a Library variable";