Expose more of Skuid functions

Hello,

Skuid provides a lot already, being able to create models dynamically, attaching children to components, utils, etc. And I understand that Skuid wants people to use declarative interface as much as possible.

Though, there are a lot of times we want to create something more dynamic, add additional features, or adjust how the component works. In those cases it’s a lot of hacking, recreating wheels and headbanging.

For example:

  • Changing the action called by the ‘Save’ button on Skuid Table. The save button just calls blockUi action and saves model, quite simple and it works like any other button.
    • Currently, I could change it if I really wanted to, but I would have to go through the tree of children components or all button components, compare strings to make sure it matches, and (I think) use component.set(). - I explored it, but haven’t done it, as it would be too messy to find the button.
  • More documentation on Events and Custom Field rendering.
    • Existing examples of Custom Field Renders are good, but an example of using Maquette would be helpful. I recently got a better idea of how the projector works, but it initially was hard because I did not know how the projector was used by Skuid. E.g. I believe if I cancel a model, Skuid will update (merge) the fields (not replace), but initially, I didn’t even know if Skuid uses the projector. Maybe it doesn’t.
    • e.g. if I want to subscribe to an update event it’s row.updated instead of updated. I found out by looking at models created by skuid via console. More examples would help. I still do not understand how to subscribe to an event to a component.
  • Creating Custom Fields is an awesome feature, but custom components lose consistency in styling. I wish there was a way for me to call a Skuid function that creates the ??node??, if I return it then it would act as a regular field. Though, before I return it I could edit it however I wanted.
    • e.g. I wanted to assign a dynamic model as a source model of options to my Combox, but as a result, I had to re-create the wheel, which was a lot of effort because Html does not provide that sort of element, also handling events fire by vNodes and async nature of updating source model is not simple.
    • e.g I wanted to create either Select (Picklist) or Combobox for a field based on custom logic.

Thank you,
Lukas

tl;dr:
Expose more of Skuid functionality to those who want to make the components more powerful, but do not want to result to re-creating the wheel.

If anyone ends up here, here’s what I found:

With JQuery and JS events it’s hard to fire an event when a components are created or destroyed, but with Marquette it’s easy. Refer to the methods section in the link bellow. These methods can be added like ‘oninput’ which is created by default.
https://maquettejs.org/typedoc/interfaces/vnodeproperties.html

As mentioned, avoid using JQuery, it can mess with Maquette (e.g. if children were removed via JQuery, but if field is updated(?) Maquette will try to append a child (I think) but will not be able find the deleted one and will throw an error). Therefore, use projector methods, e.g. component.fieldComponent.projector.replace(element, vNode)
A vNode is what is returned by fieldComponent.h(.).
Other functions can be found in link bellow:
https://maquettejs.org/typedoc/interfaces/dom.html

As far I can tell if you make changes to model, the field is updated (projector.merged(.)??), instead of re-created. Meaning if you add children to some vNode that you create via custom field renderer, then those children will not be removed. (I think, I have not explored, something I noticed while bypassing).

(Will try to edit this if I find something else)