Wikis - Page

Form.io - Do not show a component until it is fully loaded

1 Likes

In my form, I have a hidden component, 'showDynamicEntity', and this is the javascript code in the Custom Default Value section.  The code will wait for the dynamicEntity component to fully load, then wait for 1 second, and then set the value of the hidden component showDynamicEntity to 1. Then it triggers a change event   When showDynamicEntity has a value of 1, then the dynamicEntity component will be shown.

/*
In a Hidden Component called showDynamicEntity
execute commands once your component items are loaded
*/
instance.root.getComponent('dynamicEntity').itemsLoaded.then(data => {
    let timeout = 1000;
    setTimeout(() => {
            console.log("Delayed for " + timeout/1000 + " seconds.");
            instance.root.getComponent('showDynamicEntity').setValue("1");
            instance.root.getComponent('showDynamicEntity').triggerChange();
            /* Show the value of showDynamicEntity in the console log */    
            console.log(instance.root.data.showDynamicEntity);
    }, timeout);
});

The dynamicEntity component Conditional tab is setup with this javascript in the Advanced Conditions:

show = !!instance.root.data.showDynamicEntity;

Labels:

Support Tips/Knowledge Docs
Comment List
Related
Recommended