List of all the dmx functions

Is there a post or document that shows all the dmx functions like:

dmx.parse
dmx.set
etc…

While we are at it. A list of all the dom attributes like dmx-text=“var” etc

7 Likes

That would be useful

I support it

Almost any attribute, even custom, can be made dynamic with dmx-bind:<attribute-name>.

Thank @sid

I am aware of that. On the frontend side. It would still be nice to know what all the built in ones are else you get every developer mapping their own stuff.

I am more after the javascript calls so we can extend the functionality where needed. Something like what we use for Vue:

1 Like

Here an overview of the most important attributes and functions


All dmx- dom attributes, they work on all element, also elements that are not App Connect components, these attributes always expect expressions as value:

dmx-bind:<attribute-name>="<expression>" creates a data binding, you set the value dynamicly with an expression and it is also automatically updated for you.

dmx-class:<class-name>="<expression>" is a class toggle, will add/remove the class depending on the result of the expression.

dmx-show="<expression>" and dmx-hide="<expression>" are to show/hide content depending on the result of the expression.

dmx-text="<expression>" and dmx-html="<expression>" set the inner text or html of an element.

dmx-style:<property>="<expression>" lets you set specific css properties dynamically.

dmx-repeat="<expression>" will repeat the element, the expression result is normally an array of objects.

dmx-on:<event>.<modifiers>="<expression>" event handler for executing App Connect actions.


Most important function on dmx namespace:

dmx.parse(<expression>, <scope>) will parse an App Connect expression.

dmx.equal(<value1>, <value2>) to check if 2 values (can be of any type) are equal.

dmx.clone(<object>) to clone an object.

dmx.requestUpdate() tells App Connect that something is changed and it should update its components.


dmx.app is the main App component, normally you won’t need to access this directly. It can help with debugging, the data property contains the scope data and children property contain child components.


dmx.global is the global data scope, data that you set here can be accessed from anywhere.

dmx.global.set(<name>, <value>) sets a value.

dmx.global.get(<name>) gets a value.

dmx.global.del(<name>) deletes a value.


The following could be used for extending App Connect.

dmx.Component(<name>, <config>) is for creating components.

dmx.Attribute(<name>, <hook>, <function>) create a custom dmx- attribute.

dmx.Formatter(<type>, <name>, <function>) and dmx.Formatters(<type>, <formatters>) for creating formatter functions.

dmx.Action(<name>, <function>) and dmx.Actions(<actions>) for creating flow actions.

20 Likes

This is soooooo useful!
There’s several things that I had no idea you could do - thanks @patrick

Thanks Patrick this is super useful.

Patrick, can you please explain how this works?

Yes extremely useful, more of this type of documentation would be very valuable