Add custom fragment to the device details

Hi

One customer wants to add one custom fragment on his device details page.
The custom fragment is at MO level and called belt_risk_score

He went to the Admin app > properties library and trying to add this new fragment so he can select it thereafter from the DM app.
However the library does not let him add his custom fragment because it contains “_”. This limitation seems a bit weird to me… can you let me know how to handle such a case?

Thanks

1 Like

Hi @Melanie_Monnereau,

true, I also noticed this already. I believe this is worth a feature request to allow underscore characters in the properties library.
The only alternative is to rename the fragment to e.g. “beltRiskScore”

Hi Melanie,

I suggest to create a request in Aha! - Cumulocity. To me it also seems rather strange that _ aren’t allowed to be used for naming a property.

Best regards
Christian

In my view it is a bug if it is nowhere documented that “_” is not allowed. If it is documented as a limitation somewhere, it is a feature request :slight_smile:

I am quite astonished since the majority of our fragments in our library have an “_” !
The customer is running live so I dont think he d be happy for me to tell to rename his fragments. There is no other option to see the content of his custom fragment right? (apart maybe extending the ui )

There is an own section about fragment naming convention in the docs: Cumulocity IoT's domain model - Cumulocity IoT Guides

There are some special characters listed you should not use, underscore isn’t one of them. So in general, an underscore is allowed, seems its just the property library prohibiting it.

1 Like

Hi Melanie,

as a temporary workaround you can also patch the underlying validation within the properties library. Probably the easiest solution if you can’t wait for a fix.

  1. Create a clone of the administration application: c8ycli new administration administration
  2. Install patch-package as a dev dependency to your project: npm install patch-package --save-dev
  3. Within your project update the template, which is used to create a new property: \node_modules\@c8y\ng1-modules\core\ui\schemaForm\schemaPropertyEditor.html. Specifically, modify the regular expression in line 12 to allow the _ character, e.g. ng-pattern="/^[A-Za-z0-9_]+$/"
  4. Run your app locally and test your changes.
  5. Create the corresponding patch npx patch-package @c8y/ng1-modules
  6. Build the application and deploy it to the target tenant. In addition, add the postinstall script patch-package to install the patch after libraries have been installed in case the project is checked out by another developer. Of course also version control your patch.

Best regards
Christian

1 Like