'elem' parameter not isolation app elements

[michaelbukachi]

So I'm trying to set the ID of an element inside an embedded app. But it seems not to isolate the element. For some strange reason, every element with the matching selector receives the same ID. I did a test with the following snippets and was able to replicate the bug. Here's the code for the main app:

<div data-embed='Embedded' data-id='1'></div>
<div data-embed='Embedded' data-id='2'></div>

Here's the code for the embedded app:

<div class="embedded">
    <p>
        Some random text
    </p>
</div>

And the javascript:

app.init = function(cb) {
    // add logic to initialize UI here.
    $('.embedded', elem).attr('id', 'embedded'+params.id);
    cb();
};

Here's the result I get when I preview the app

From the screenshot you can see that those two embedded apps are sharing the same id.

[objecthub-io]

Thank you for this questions.

The problem is that you embed the same app twice with the same name data-embed='Embedded'.

Open the dependencies and rename the variable for the import to Embedded1. Rename the variable in the HTML. Delete the second embed. Drag and drop the Micro App to be embedded on the form again. Give the variable name Embedded2.

We added that the preview will show an error if the same variable name is used twice for a Micro App and updated the documentation.

[michaelbukachi]

Okay. Got it. Thanks