[13.0.7] How to access components and its properties?

lukaspovilonis

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.

Anna Wiersema

Hi @lukaspovilonis, what is your desired outcome here?

• If you want to render and unrender a component, it's best to do that via the action framework using the toggle component action.
• Is there a reason it doesn't make sense to use the action framework for your specific use case?

lukaspovilonis

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

lukaspovilonis

Hi Anna,

Thank you for the reply.

It is true, using actions and action sequence would work achieve the same result.

But,

• I would have to create action sequence for each component, I think I would roughly have around 50.
• Re-rendering (toggling x2 - off and on) doesn't work as expected. By mistake I have created another Question: https://community.skuid.com/discussion/8015489/skuid-v2-actions-action-sequence-not-working-as-expected#latest

Furthermore, is it possible to create an action sequence inside Javascript?

I tried

• skuid.runtime.getPage([PageName]).actionSequences.getSequenceXMLFromId([ActionSequenceId]) -> Returns an error
• skuid.runtime.getPage('Reporting_v2').actionSequences.initializeActionSequences(xml) -> returns an empty list

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

Anna Wiersema

Thanks for your reply, Lukas.

• If I'm understanding correctly, you have a chart that you've drilled down into, and you want the chart to reset to the original un-drilled down version when the filter is selected, correct?
• You can dig into the highcharts api for more on how to re-set the drill-ing level via JavaScript. If you have multiple charts on the page, you'd have to make sure you get the correct chart in context.

lukaspovilonis

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).

• hc = skuid.runtime.getPage([PageName]).component.getById([ChartId]).getHighchartsObject()
• Highcharts.chart([ChartWrapperId], hc.options);

I assume Skuid creates a new chart when a drill down event is called or charts are manipulated outside of chart options.

lukaspovilonis

Hi Anna,

Another two use cases have came up:

1. I need to rerender picklist choices, where the picklist itself is created using custom field renderer. If the picklist options are based on another model, when that model is updated then the picklist's options are rerendered automatically by Skuid. Though, in my case the options are based on JS Snippet and I might need to rerender either due to another model update, user choosing an option from a different picklist or button click.
2. A user can submit a questionnaire by a click of a button, after the questionnaire has been submitted the user shouldn't be able to edit it anymore. Hence, I need to rerender form fields, custom form fields, buttons, custom buttons

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

Anna Wiersema

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.