SAP/ui5-webcomponents-react

DynamicPage : Wizard steps area within the same container as the page header.

DikshaHub opened this issue · 3 comments

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.

image

Describe the solution you'd like

We expect the layout to look like the example below.

image

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

  • I’m not disclosing any internal or sensitive information.

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.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.