Custom objects

Custom objects is a way of extending the functionality of Weld. If you know web programming, you can create objects out of HTML, CSS, and JavaScript and make them available to Weld users.

Creating and editing custom objects

You find the editor for custom objects in the Insert menu:

Create a Custom Object

For existing objects in the Insert menu, use the edit icon in the object list or on the toolbar:

Edit_custom_object.png

Here’s what a simple object looks like in the object editor:

Custom object editor

In the Weld editor, the object looks like this:

Custom object in the Weld editor

Sample code

HTML:

<p>Hello {{text}}!</p>

CSS:

.test-widget p {
  background: purple;
  width: 100%;
  height: 100%;
}

JavaScript:

// thisElement variable is provided by Weld
thisElement.addEventListener('click', function () {
  alert('You clicked me!');
});

Custom data properties

As you can see in the example above, the data property text is exposed to the Weld user, who can change the value and affect what the object looks like.

You can add new properties with the “Add data property” button.

Using external JavaScript or CSS

Use the “Add external JS/CSS file” button to add external references.

Referencing the custom object in CSS

At runtime, all custom objects get a wrapping DIV tag with the classname of the custom object’s “slug” – that’s why the CSS code above references .test-widget.

You can also reference one object instance using #thisElement , which is great for styles that only want to affect the selected object. Example:

#thisElement {
  color: {{color}};
}

Referencing the custom object in JavaScript

Weld provides a variable thisElement which contains the DOM element for the current object. For CSS, see #thisElement above.

Using custom objects with action blocks

You can use the Change value trigger block, as well as the Get value/Set value action blocks to communicate with custom objects.

Triggering events from a custom object

There’s two ways of triggering a Change value trigger block:

  1. Automatic trigger with embedded input field: if your smart object contains an input element with the CSS class weld-input on it, it will trigger Change value when the value changes. This method also allows you to read the object’s value with the Get value block.
  2. Manual trigger with JavaScript: $(thisElement).trigger('change', [valueSimple, valueComplex]);
    where valueSimple typically is a string or number, and valueComplex is an object with the structure e.g. { type: "string", data: myString } to support more complex data types.

Listening for events inside a custom object

The Set value block will trigger a change event within the custom object:

$(thisElement).change(function (event, valueSimple, valueComplex) {
    console.log('It changed! Value:', valueSimple, valueComplex);
});

The Trigger event block can trigger a custom event within the object:

$(thisElement).on('start', function (event, valueSimple, valueComplex) {
    console.log('start was triggered!', valueSimple, valueComplex);
});

Do you want to learn more about visual, animated, and interactive content?