Elements Component
  • 22 Feb 2024
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

Elements Component

  • Dark
    Light
  • PDF

Article summary

The Elements component are used to dynamically alter the look and feel of components in the App. They include the following blocks:

Create Element

It enables the user to create a new component (or element) in a particular page. In this case, a new "button" is created. 

InputOutputBlock LayoutGenerated Code

Variable or Text element tag name

Returns the created Element object


CreateElement

 __er.createElement('BUTTON');

Remove Element

This block enables the user to remove an existing element within a page. 

InputOutputBlock LayoutGenerated Code

Element Object

Removes the given element objectRemoveElement
 __er.removeElement();

Append Element

This block is used to add another object within an existing element or add another element within an element. Multiple elements can be appended to a single element. 

InputOutputBlock LayoutGenerated Code

Element Object for all input fields


Append input-2 element object to input-1 element object as a child element.


AppendElement
__er.appendElement(, );

GetElement

The GetElement block works by fetching the element by: Id, ClassName, Name, Tag Name. It returns the value that has been selected within the block. 

InputOutputBlock LayoutGenerated Code

Choose the Get element by type from the dropdown list.

Variable or Text - input-1


Returns element object or list of element objects based on choice. 
__er.getElementBy("id", 'id');

GetElement Property

The GetElementProperty block fetches the property value for the property selected in the dropdown list. It returns the object value (property) for the element as output.

 

InputOutputBlock LayoutGenerated Code

Choose the element property from the dropdown list,

input-1 - Element Object

 



Returns element object's property as text.




 

   item = __er.getElementProperties(, "innerHTML");

SetElement Property

The SetElementProperty block sets the element property value for the property selected in the dropdown list.

InputOutputBlock LayoutGenerated Code

Choose the element property.

Element Object for input-1, 

Variable or text for input-2


Set given input-2 property value to input-1 element object.


Setelementproperty 
__er.setElementProperties("title", , 'Hello', "");

RemoveElementProperty

This block removes a property from an element.

InputOutputBlock LayoutGenerated Code
Element object in input-1
Attribute name in Text or variable in input-2
Removes the given element propertyRemoveattribute
__er.removeElementAttribute(, "Name");

GetElementStyle

This block returns the element style used in the element as a text value.

InputOutputBlock LayoutGenerated Code

Choose the element style from the dropdown list

Element Object in input-1


Returns element object's style property as text


__er.getElementStyleProperties("background", );

SetElementStyle

This block sets an element style to an element.

InputOutputBlock LayoutGenerated Code

Choose the element style from the dropdown list

Element Object for input-1, 

Variable or Text for input-2,


Set the element style value input-2 to the element object input-1.


 
 __er.setStyle("background", , );



Was this article helpful?

ESC

Eddy, a generative AI, facilitating knowledge discovery through conversational intelligence