Add component to dom using javascript

Ask us anything
1

Note: anytime I refer to a “component”, I’m referring to the type of components that can be created in the editor.

I’m building a Toaster component to generate toasts. I’m almost exclusively using custom javascript. At the moment, I generate a toast by creating a div in the dom and then assigning it styles like below:

const toast = wwLib.getFrontDocument().createElement('div');
toast.className = 'toast';
toast.textContent = message;
  
Object.assign(toast.style, {
    background: '#333',
    color: '#fff',
    height: '50px', // Fixed height for easy management
    padding: '10px 20px',
    borderRadius: '6px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.2)',
    opacity: '0',
    pointerEvents: 'auto',
    position: 'absolute',
    left: '50%',
    transform: 'translateX(-50%) translateY(100%)',
    transition: `transform ${TOASTS_EXPAND_TIME / 1000}s ease`,
});

In place of this, it would be great if I could build a Toast component and then simply add it to the dom with any relevant properties using javascript. Perhaps weweb has an api that would allow this. This would make the design of the toasts easier and would keep the Toaster code cleaner. Is this possible?

2

This is most likely not possible, or at least not reccomended. You’d be tampering with the underlying framework’s inner workings, which could go out of sync.

1 Like
3

custom code component with vuejs Teleport allows you tu use weweb elements outside the weweb app scope.

you probably don’t need this anyway because you can create toast elements with weweb nocode elements.

3 Likes
4

Like Dorilama mentioned, you can definitely do this without code. The below example just uses some workflows and an array variable. I execute the workflow whenever I want to add a toast, and it adds it to the variable queue that shows toasts.

Example

1 Like
5

I’m sure I could port it to no code, but it was actually easier to do with javascript. It’s a rather fancy implementation.