[13.0.7] How to access components and its properties?
in Questions
componentId = 'CompentId'
c = skuid.runtime.getPage('Questionnaire_v2').component.getById(componentId);
in v1 I could c.unrender(), etc. but how do I do that in v2?
In my case I want to disable/unrender modal component from JS.
0
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Answers
Hi @lukaspovilonis, what is your desired outcome here?
Action/Action-Sequence don't behave as expected.
async/await or $.when([runActionSequence]).then([runAnotherActionSequence]) is also not working.
In my example i'm trying to achieve the affect of skuid.component.getById([ComponentId]).rerender() from Skuid v1. Hence, first I'm hiding component and then showing it again (or toggle x2).
On the surface, it seems like Skuid v2 is updating the state only after all actions have been executed.
Note: when I say I expect the component to rerender I mean rerender like skuid.component.getById([ComponentId]).rerender() in v1, and not hiding/showing the HTML tag.
Example 1:
Execute the following lines all together in console.
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
Result: As explained before, it seems like first action is not considered or skuid doesn't update the state.
Example 2:
Execute the following lines one at a time in a console:
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
Result: Component gets hidden after first line is executed, and then the component is shown again after the 2nd line is executed, achieving the desired result.
Example 3:
Execute the following all together in console:
async function test(){
await skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
await skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
}
test();
Result: Same as example 1, the state is updated 'once' and it's after both action sequences have executed.
Example 4:
Execute the following all together in console:
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
setTimeout(() => {
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run()},
2000);
Result: As desired, same as example 2, first the component gets hidden and then 2 seconds later it is shown again.
Example 5:
Create an action sequence with 2 actions, both of them toggling the same component
Result: Same as example 1, only updating the state after the last action.
Side affect/bug:
Showing/hiding components multiple times, the component starts to duplicate.
Use case:
I need to re-render components for multiple reasons in multiple places, but in this use case i'm trying to redraw (drill to the top and show new data) when model has been updated due to filter .
Best,
Lukas
Hi Anna,
Thank you for the reply.
It is true, using actions and action sequence would work achieve the same result.
But,
Furthermore, is it possible to create an action sequence inside Javascript?
I tried
What should these functions do, how should I use them and is there a different way?
My use case:
I update a filter, I want a chart to drill to the top and re-render. I have other use cases, but this one is the one I'm currently working on.
Best,
Lukas
Thanks for your reply, Lukas.
Hi Anna,
Thank you for the suggestion, but unfortunately I am unable to find anything.
The only way to create a HighChart is to recreate one which would require options plus more:
If I recreate a chart using just options it will create a chart of only the level that I got options from (I cannot drilldown after I re-create it).
I assume Skuid creates a new chart when a drill down event is called or charts are manipulated outside of chart options.
Hi Anna,
Another two use cases have came up:
Unfortunately running action sequence to show/hide component doesn't actually reconstruct the component as it did in v1 (and that's what I'm looking for), instead it feels like it just changes hide/show attribute on HTML tag.
Your help is much appreciated.
Best,
Lukas
Hi Lukas, one of our product engineers took a look at this post, please find their answers below:
Comment 1
The Question
componentId = 'CompentId'
c = skuid.runtime.getPage('Questionnaire_v2').component.getById(componentId);
in v1 I could c.unrender(), etc. but how do I do that in v2?
In my case I want to disable/unrender modal component from JS.
Dev Answer
Unrender in V2 simply sets the “visible” boolean within state to “false”. This works for most components but a modal has to be removed entirely so they could run “c.unregister()” which should remove it entirely.
Comment 2
First part
Action/Action-Sequence don't behave as expected.
async/await or $.when([runActionSequence]).then([runAnotherActionSequence]) is also not working.
In my example i'm trying to achieve the affect of skuid.component.getById([ComponentId]).rerender() from Skuid v1. Hence, first I'm hiding component and then showing it again (or toggle x2).
On the surface, it seems like Skuid v2 is updating the state only after all actions have been executed.
Note: when I say I expect the component to rerender I mean rerender like skuid.component.getById([ComponentId]).rerender() in v1, and not hiding/showing the HTML tag.
Developer
Why are you trying to “rerender” the component? In v2 nothing really needs rerendering. If state is updated properly it will auto-update itself.
Example one
Execute the following lines all together in console.
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
Result: As explained before, it seems like first action is not considered or skuid doesn't update the state.
Developer
If this is performing an action on the modal then there will be issues because we use a delay to hide/show the modal so it does a fade in/out effect.
Example two
Execute the following lines one at a time in a console:
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
skuid.runtime.getPage([PageName]).actionSequences.getByName('TogglWrapper').run();
Result: Component gets hidden after first line is executed, and then the component is shown again after the 2nd line is executed, achieving the desired result.
Developer
This probably works better because the delay is around 300 milliseconds so doing it manually probably creates its own delay
Example three
Execute the following all together in console:
async function test() {
await component.run();
await component.run();
}
test();
Result: Same as example 1, the state is updated 'once' and it's after both action sequences have executed.
Developer
This could be better implemented on our side but the toggling of a modal kicks off a separate asynchronous method that does not tie back to the action firing it. Could be a product improvement.
Example four
Execute the following all together in console:
component.run();
setTimeout(() => {
component.run()},
2000);
Result: As desired, same as example 2, first the component gets hidden and then 2 seconds later it is shown again.
Developer
This makes sense that this would work since the delay/transition of the modal is 300 milliseconds.
Example five
Create an action sequence with 2 actions, both of them toggling the same component
Result: Same as example 1, only updating the state after the last action.
Developer
Again, this goes back to the separate 300ms asynchronous hiding/showing of the modal so it makes sense this would not work.
Side effect/bug
Showing/hiding components multiple times, the component starts to duplicate.
Developer
This does make sense as well since many register/unregister calls are being made.