Do custom UI components have stable IDs?

UI Builder
1

I’m developing a custom component which I want to publish to the marketplace in the future.
When developing a custom component, it gets an ID assigned, which I can see in component.json. Also, the component sources are stored within a folder having this ID as the folder name.

Assume, I had published my component to the marketplace and someone has installed it from there. Will the ID stay the same as in my development environment? And also the folder for the component sources will be generated with the same name?

I’m asking this, because I want to pack a file (an image) into my component sources which is addressed by an absolute (https)URL at runtime. This URL has to contain the component ID. Therefore, the ID must be universally constant to stay the same for all consumers of my component.

Hope this was clear,
Regards

2

no, at this moment each new component gets a new id

3

what if inside a Component class there will be an ability to get the componentId, will it help you?

4

Just to verify:

  • I’m developing a component with Id=X
  • I’m publishing this component to the marketplace
  • Someone else is installing this component from the marketplace into her development environment
  • In this “someone elses” dev environment, my component gets a new ID <> X

If this is true, then this would mean that before, or during installation from the marketplace, component.json is changed by you because it contains the component Id.

5
  • Someone else is installing this component from the marketplace into her development environment

yes, the new component will contain id=Y

  • In this “someone elses” dev environment, my component gets a new ID <> X

yes,

if you need to have the id=Y inside your component code we can add a new system property componentId

export default function MyCustomComponent({ componentId }) {
 // componentId => X in your version
 // componentId => Y in your customer 

})
6

I don’t think this will help me. I’m depending on an external lib which I’m wrapping by my component. This lib brings a CSS file, which has to include URLs of other resources (background images),

Let me do some more experiments to check whether I can tweak these URLs in the CSS dynamically …
Thanks so far

I will report back here …

7

@vladimir-upirov :
Yes! An ability to get the componentId will definitely help!
I can incorporate the css-file via generating header entries for (rel, stylesheet) with an appropriate href-url. This href-url has to include the componentId.

Regards

8

ok, we will add this

may I ask you why do you need to import a CSS file in this way?
do you know you can import the file in the component styles.less file, don’t you?

9

Check my App with ID 15D1E631-1E7E-C551-FFD8-6E10595D5F00. It’s about the component EndlessFileManagerPro. You can open the page files and press the “Create” button. The setup is currently done in away that it does not work. Dev Console is reporting an error for GET.

In index.less I’m doing @import (inline) 'file-explorer.css'.
The css file contains sections like background-image: url('fileexplorer_sprites.png')
The URL generated with url('fileexplorer_sprites.png') then is https://plentywork.backendless.app/api/files/ui-builder/containers/default/fileexplorer_sprites.png which points to the root directory of the app. But the file fileexplorer_sprites.png is not in the root. It sits beside the file file-explorer.css in the styles folder of my component.

I think the issue is, that all index.less file are imported into the file style.less which sits at the root of my application. Therefore, the result of url() is pointing to the root as well.

Therefore, I have to know the ID of my component. Then I can either

  1. modify the url() statements in file file-explorer.css, or
  2. enhance the header section of index.html to link/href the css file located within my component

Makes sense?

10

I see,

But I guess it won’t work because the base path can be different in the preview mode and when you build (publish) your UI container, on top of that the UI container can be moved into any place/hosting. So I assume the relative path is the way to go, but seems like it doesn’t work as expected.

I’ve created a ticket to investigate it BKNDLSS-29850

Btw, there is already an option to get the current component id

import componentDefinition from '../component.json'

const componentId = componentDefinition.id
11

This should work. It seems that the css function url(filename) is adding the correct path depending on where the css-file is located. So, if the css-file is located at https://subdomain.backendless.app/api/files/ui-builder/containers/default, then url(filename) is returning https://subdomain.backendless.app/api/files/ui-builder/containers/default/filename

I will use import componentDefinition from '../component.json'

Thanks