How to write the syntax in global functions or execution code to navigate or redirect to the another screen. To call API, we used ensemble.invokeAPI just like what is the syntax for screen navigation?

[kmahmood74]

how to navigatescreen

[kmahmood74]

It's navigateScreen. See example below -

 - Row:
      styles: { mainAxis: spaceAround }
      children:
        - Button:
            styles: { outline: true, padding: 20 }
            label: View all available widgets
            onTap:
              action: navigateScreen
              name: Home

You can see such examples at the bottom of every screen in the kitchen sink. When navigating to a different screen, you can pass parameters too. For an example, see the Hotel App at https://studio.ensembleui.com/app/88a4d904-86a5-4c8c-a8be-5d606660b545/screens

Example code below from the Hotel Home Screen - https://studio.ensembleui.com/app/88a4d904-86a5-4c8c-a8be-5d606660b545/screen/5670433c-919f-4d08-81b3-35c36bccf8b2

onTap:
  action: navigateScreen
  name: Hotel Detail
  inputs:
    title: ${hotel.name}
    id: ${hotel.id}

[gaurikalp]

Yes, this approach can be used in a normal flow, however we like to browse the screen based on the conditions.

In the example that follows, we used the onComplete action to navigate the screen, but the screen gets routed in both situations, whether the login is valid or invalid.

What is the syntax to navigate the screen inside the execute code so that we may do conditional navigation?

e.g
onResponse: |
//@code
apiStatus.text = response.body;
if(response.body.status=="Success"){
apiStatus.text = 'Valid Login';
//navigate to home scrren
}
else{
apiStatus.text ='In Valid Login';
//show only alert or navigate to another screen
}

[kmahmood74]

hi @gaurikalp good question. We methods available that you can call in code.

I have added examples here in kitchen sink here - https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/909ba90b-a731-4480-8707-cc63e94a61d7

go to the bottom to see the examples with 3 buttons that perform navigation actions using code.

pasting it here too -

  - Button:
      label: Navigate to Home using code
      onTap:
        action: executeCode
        body: |
          //@code
          ensemble.navigateScreen('Home');

You can also pass inputs as an object to this method such as

ensemble.navigateScreen('Home', {'key1':'value1','key2':'value2'});

Let me know if you have questions