Hi,
Our team is working on the Settings app and we are currently in the process of creating customer facing documentation and how-to guides for customers building their own settings. It will take a bit longer to get everything finished and published tho.
In the meantime, I can offer some help if building a settings widget is important and time relevant for you! If integrating into the Settings app is not so important and you can wait until the official documentation and tooling is released, I would suggest that you build the UI for your settings as part of your application. If this is done in a decoupled way, it can then be reused for the Settings app.
The first thing to note is that the new Settings app no longer provides an auto generated UI. This means that every app must build the relevant settings UI according to the schema they have.
The entries in the Settings app are called "settings widgets".
The first step is to create the files and then register the widget:
1. Files:
<app-root>/settings/your-settings.widget.tsx
2. app.config.json:
"app": {
"settings": {
"your-settings": {
"name": "<Your-Widget-Name>",
"description": "<User-Friendly-Description>",
"schemaIds": ["<Your-Settings-Schema-Ids>"]
}
}
}
The file `your-settings.widget.tsx` can look something like this:
import { AppRoot } from '@dynatrace/strato-components/core';
import React from 'react';
import { YourSettingsFormContainer } from '../<your-app-code>';
const YourWidget = () => {
return (
<>
<ToastContainer />
<YourSettingsFormContainer />
</>
);
};
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDom.createRoot(rootElement);
root.render(
<AppRoot>
<YourWidget />
</AppRoot>,
);
} else {
console.error('the root element is not defined');
}
Everything in terms of permissions, validation, errors, navigation, etc must be handled. There will be some tooling to offer a consistent look & feel as well as some out of the box functionality.
I'll stop here for now. Please try the above suggestions and let me know if there's any other questions.
