Examples of multiple actions on an element's event listner

[DonalRafferty]

Is it possible to have multiple actions occur on a single element's event listener? In my case I have a dropdown where I will call an API each time the user selects something from the dropdown. When I get a response I will hide/show some UI elements. What I am struggling with is I also want to start a progress bar at the start of the API call and when I get a response.

My code so far:

onChange:
            action: invokeAPI
            name: getBinDetails
            inputs:
              bin: ${cardNumber.value}
            onResponse: |
              //@code
              status.text = 'Something went right';
              loading.visible = false;
            onError: |
              //@code
              status.text = 'Something went wrong';
              loading.visible = false;

My steps needed are:

• Detect a change in the dropdown selection
• Invoke API call
• Set progress bar visibility to true
• On API response set progress bar visibility to false (and show some text)

It is setting the progress bar visibility to true that I am not clear on how to achieve.

I have tried using the Code pipe in addition to the action but it isn't clear if I can have both on the one event listener (onChange). An alternative approach would be to do it all in code, but I haven't come across any examples that show how to handle an API response in code, only how to invoke the API.

What would be the best approach to take, and do you have any examples to demonstrate?

[amin-nas]

@DonalRafferty You can chain actions that run one after another.

I put together an example here:
https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/vQxiHcgb8i1RKvqVWUnQ

Let me know if that satisfies your use case. I've also opened an issue for doing concurrent actions here, but that shouldn't be required for your use case.