Lukas742
commented
2 days ago Hi @DikshaHub
rendering the header of the Wizard separately is not supported by the component, so rendering the header in the header area of the DynamicPage and the content in the content area is not supported. You can probably still achieve the desired behavior from your screenshot, since there's no expand/collapse functionality, so you can render the Wizard inside the content and stretch its height to the available screen height (to allow scrolling only inside the Wizard). Also, since the Wizard is then responsible for the content padding, you can remove the padding of the content area of the DynamicPage.
Here you can find an example of the implementation: https://stackblitz.com/edit/github-wcwdgu-arpeqx?file=src%2FApp.tsx,src%2Findex.css
With the 2.0 release of UI5 Web Components for React, the DynamicPage will be replaced with the DynamicPage web component. Since both the Wizard and the DynamicPage are web components then, you can already check if this behavior is supported then. You can find the documentation for the latest release candidate of @ui5/webcomponents here. We're still in the progress of preparing our 2.0 release but a first release candidate version should be coming soon.
Is your feature request related to a problem?
We are working on a dynamic page that includes a wizard. Our requirement is to have the page header and wizard steps within the same container.
Please refer : https://stackblitz.com/edit/github-wcwdgu-svwpsw?file=src%2FApp.tsx
Here is the current layout.
Describe the solution you'd like
We expect the layout to look like the example below.
Refer https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2697897301 .
The wizard step icon titles should be integrated into the header, and there should be no unnecessary padding visible between the wizard content block and the page border.
Describe alternatives you've considered
No response
Additional Context
No response
Organization
No response
Declaration