[13.0.7] How to access components and its properties?

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.

Answers

  • 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?
  • edited November 12, 2020

    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

    • 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

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

  • 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 WiersemaAnna Wiersema 🛠️ 
    edited December 16, 2020

    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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!