https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/78052e52-6ed0-4237-babb-1b822aafeb97

get the attached error -

it used to be sorted alphabetically but not anymore.

I should be able to sort by Most Recent if I like but alphabetical is more urgent and a bug

Integrate Firebase / Firestore with first class support inside Ensemble:

1. Firebase authentication.
2. Query Firestore directly

I want to be able to define path to my logo once, and reuse across views.

That needs to be through config or some other way.

Setting visible: false on DataRow does not work.

example

View:
  title: DataGrid
  Column:
    styles: { gap: 12, padding: 24, scrollable: true }
    children:
      - DataGrid: 
          DataColumns:
            - label: Hotel Name
              type: text
              tooltip: Hotel Name
            - label: Location
              type: text
              tooltip: Location
          children:
            - DataRow:
                children:
                  - Text:
                      text: My Hotel
                  - Text:
                      style: {font: subtitle}
                      text: Location
            - DataRow:
                visible: false
                styles: {font: subtitle}
                children:
                  - Text:
                      text: My Hotel - hidden row
                  - Text:
                      style: {font: subtitle}
                      text: Location

Some widget like this - https://api.flutter.dev/flutter/material/ReorderableListView-class.html

is needed in Ensemble. Need to be able to customize the drag handle to be whatever I like.

1. get device's location (lat, lng)
2. option to continuously callback when location has changed (further than x meters from previous location)

It doesn't look like it is possible to have one of the values in a dropdown appear as a default, already selected, value. This would be rather than the Hint text parameter.

For example:

      - Dropdown:
          label: Select a payment card
          default: 0 #<-- the index of the default value in the items list
          items:
            - 5186***************
            - 5120***************
            - 2223***************
          required: true

This would then show the value (5186***************) rather than any hint text or an empty dropdown. In addition, any sort of code or selection logic would pick up this selected value even if the user never interacts with the dropdown.

I want to be able to fire multiple actions for an event.

View:
  onLoad:
    - action: invokeAPI
      name:
      onResponse:
    - action: invokeAPI
      name:
      onResponse:

Open Kitchen sink in Ensemble Starter on iOS Simulator
Tap on ChartJs - https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/5d7b84de-3bbd-456e-aeea-98e2c9f4c3c7

on the console -

When I hit the back button to go back to the Kitchen Sink home, I get this exception -

Should be able to -

1. easily integrate a custom widget or library written in flutter
2. Reference it in your EDL or javascript
3. Preview it in the browser
4. investigate if we can easily push it as a testflight app so user may test it on the device and get feedback

e.g. Base URL for dev, prod

lottie animations are chopped in html renderer mode. We'll try to switch to https://lottiefiles.com/web-player for html renderer

for canvaskit and native, no changes needed as it works perfectly fine.

Use Cases -

1. As an Ensemble app developer, I want to define a custom widget in Ensemble and reuse across any view of my app.
2. Ensemble will be releasing a bunch of templates as re-usable custom widgets as well such as SummaryWidget, ProfileWidget etc.

See Kitchen Sink example for Toast - https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905

Only Success toast works, rest do not do anything

JS function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

There doesn't seem to be any event listeners for when a user interacts with a carousel. For example, when a user swipes between "cards" in a carousel it would be nice to have an "onChange" listener that would let us know what position in the array of content that the user is on.

This would open up a lot of new possibilities, including changing sub content as the user swipes. However, for our use case we just need to know which item the user has switched to so we can load a detail view for that item.

I'd imagine the listeners would follow the same structure as existing listeners for other elements such as onTap for the Button element.

When Ensemble Live loads in web, the full URL is trimmed.

Full URL example:
https://ensemble-live-web.web.app/web/index.html?appId=541d7525-31f7-4c6d-9f06-74fb07c2cacc&showAction=false

When the app loads, the URL is trimmed to:
https://ensemble-live-web.web.app/web/

When my Column includes a onTap action, I expect the entire Column to fire the action. But when the Column includes a Lottie, the Lottie area is not firing the action.

Example (line 42):
https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/576f3004-83e6-429d-b256-628d85e05f7f

Running this app - e74abf50-6177-456f-8556-0f01e5235860

following are the errors -

An Observatory debugger and profiler on iPhone 13 is available at: http://127.0.0.1:61286/cDkKUo-KVHY=/
The Flutter DevTools debugger and profiler on iPhone 13 is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:61286/cDkKUo-KVHY=/
flutter: Code Error: Exception: Error: LateInitializationError: Field 'rootScopeManager' has not been initialized. while executing ensemble.storage.token = response.body.token;
flutter:
flutter: null
flutter: Code Error: Exception: Error: LateInitializationError: Field 'rootScopeManager' has not been initialized. while executing ensemble.storage.customerId = response.body.id;
flutter:
flutter: null
flutter: Code Error: Exception: Error: Exception: Cannot set a property on a null object. Property=enabled and prop value=true while executing connectBtn.enabled = true;
flutter:
flutter: null

Background

There are use cases where I need to chain multiple actions of different types, and then trigger that set of actions on more than one event. E.g. run the action group on screen load and also when user presses a button.

Use case

As an app developer, I want to be able to create a reusable composite action globally and call it throughout my app.

Proposed syntax

# new section where I can define action groups to be reused
Actions:   

  # name the action
  myCustomAction:
    action : ...

1. Defining re-usable code
   Just like we define screens and widgets as re-usable, code itself is defined as another artifact except this artifact contains javascript code.
   Re-usable code contains -

• functions such as

function add(a,b) { return a+b;}

• vars such as

var counter = 0;

2. Scope of imports
   Each import is resolved at the screen level. Code libraries cannot be used to share state across screens or widgets.
   Example
   myLib

var counter = 0;

Let's say myLib is imported in Home and Profile screens. The code in the Home screen updates the counter to 10. The Profile screen or any other screen that imported myLib will still get their own independent counter as 0.

3. How are the variables and functions in re-usable libraries resolved in case of naming conflicts
   We apply the rules that ES5/HTML uses i.e. the last one wins except when the same library has been included multiple times.
   Example -
   commonUtils

var counter = 0;
function add(a,b) {return a + b;}

apiUtils

var counter = 10;
function add(a,b,c) {return a+b+c;}

Let's say the screen imports commonUtils and then apiUtils. Value of the counter will be 10 and the add function from apiUtils will be one invoked when anyone calls add in the page.

Same applies to re-usable widgets as well. Code libraries at the screen level are automatically inherited by all the widgets in the page. Widgets can have their own libraries as well. If widget imports the same library that is already imported in the screen it resides in, it is not imported again. Any new libraries are imported in the order defined.

5. Importing code is supported in both Screens and Widgets as follows. Currently importing code within a code library is not supported. It is being tracked here - #1142

Importing Code in a screen -

Import:
  - apiUtils
  - common

View:
    # Optional - style the screen
    styles:
      scrollableView: true

    # Optional - set the header for the screen
    header:
      title: Home
    onLoad: |
      saveName('Khurram','Mahmood');
      console.log('name is ='+storageName);

    # Specify the body of the screen
    body:
      Column:
        styles:
          padding: 24
          gap: 8
        children:
          - Text:
              text: Hello ${ensemble.storage.jslibtest.name.first} ${ensemble.storage.jslibtest.name.last}

Importing in a re-usable widget -

Import:
  - common
  - apiUtils
Widget:
    inputs:
      - inputName
    body:
      Column:
        children:
          - Text:
              text: ${inputName.first} ${inputName.last}
          - Button:
              text: ${storageName.name.first} ${storageName.name.last}
              onTap: |-
                sayHello();
                console.log('name:'+getName());
                callAPI('mockAPI',{});

Global javascript variables/functions are processed AFTER the widget binding, so binding to a javascript variable will not work. Additionally, when the variable changes, we doesn’t dispatch changes so binding again is not working.

We need the Variable Invokable to notify us when it is modified, either directly via = or myVar.name =

note that when providing color in the yaml, make sure you put quotes around it

Examples -

overlay: "'#008000'"
overlay: "'blue'"
overlay: "'rgba(255,255,255, 0)'"

Stack can specify the alignment for all its children. However each child should be able to override and specified their own position within the Stack.