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

[DikshaHub]

Feature Request Description

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.

Proposed Solution

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.

Proposed Alternatives

No response

Organization

No response

Additional Context

No response

Priority

None

Privacy Policy

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

[kineticjs]

Hi @DikshaHub,

Thank you for the sample of the issue. When inspecting the rendered HTML, however, I cannot see the ui5-dynamic-page component developed in this repo, see e.g.: https://sap.github.io/ui5-webcomponents/nightly/components/fiori/DynamicPage/

Maybe you are using a different DynamicPage component currently?

In our ui5-dynamic-page I was able to nest ui5-wizard in its "headerArea" slot, so probably the issue is specific to the component in your linked sample.

Thanks

[github-actions]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.