Skip to content

docs(ui5): add fiori wizard #13700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MariaIDineva merged 3 commits into from
Jan 6, 2026
+594 −1
Merged

docs(ui5): add fiori wizard #13700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
535bc98
docs(ui5): add fiori wizard
MariaIDineva Jan 5, 2026
2a62bc6
docs(ui5): use fundamental styles
MariaIDineva Jan 5, 2026
dc83ac0
Merge branch 'main' into docs/add-fiori-wizard
MariaIDineva Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion libs/docs/ui5-webcomponents-fiori/api-files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,6 @@ export const API_FILES = {
uploadCollection: ['UploadCollection', 'UploadCollectionItem'],
userMenu: ['UserMenu', 'UserMenuAccount', 'UserMenuItem', 'UserMenuItemGroup'],
userSettingsDialog: ['UserSettingsAccountView', 'UserSettingsDialog', 'UserSettingsItem', 'UserSettingsView'],
viewSettingsDialog: ['FilterItem', 'FilterItemOption', 'GroupItem', 'SortItem', 'ViewSettingsDialog']
viewSettingsDialog: ['FilterItem', 'FilterItemOption', 'GroupItem', 'SortItem', 'ViewSettingsDialog'],
wizard: ['Wizard', 'WizardStep']
};
4 changes: 4 additions & 0 deletions libs/docs/ui5-webcomponents-fiori/docs-data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@
{
"url": "ui5-webcomponents-fiori/view-settings-dialog",
"name": "View Settings Dialog"
},
{
"url": "ui5-webcomponents-fiori/wizard",
"name": "Wizard"
}
]
}
4 changes: 4 additions & 0 deletions libs/docs/ui5-webcomponents-fiori/docs-routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,10 @@ const componentRoutes = [
path: 'view-settings-dialog',
loadChildren: () =>
import('@fundamental-ngx/docs/ui5-webcomponents-fiori/view-settings-dialog').then(configureLibRoutes)
},
{
path: 'wizard',
loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents-fiori/wizard').then(configureLibRoutes)
}
];

Expand Down
235 changes: 235 additions & 0 deletions libs/docs/ui5-webcomponents-fiori/wizard/examples/basic-sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
<div style="width: 100%; height: 600px">
<ui5-wizard contentLayout="SingleStep" (ui5StepChange)="onStepChange($event)">
@for (step of steps(); track $index) {
<ui5-wizard-step
[titleText]="step.titleText"
[subtitleText]="step.subtitleText"
[icon]="step.icon"
[selected]="currentStep() === $index"
>
<div class="fd-padding">
@if ($index === 0) {
<!-- Step 1: Product Information -->
<ui5-title level="H3">{{ step.titleText }}</ui5-title>
<ui5-text>Please provide information about your product.</ui5-text>

@if (!step1Valid() && productName().length > 0) {
<ui5-message-strip design="Critical" [hideCloseButton]="true" class="fd-margin-top--sm">
Please fill in all required fields to continue.
</ui5-message-strip>
}

<div class="fd-margin-top--md">
<div class="fd-margin-bottom--md">
<ui5-label required class="fd-margin-end--tiny">Product Name</ui5-label>
<ui5-input
placeholder="Enter product name"
[value]="productName()"
(ui5Input)="onProductNameChange($event)"
></ui5-input>
</div>

<div class="fd-margin-bottom--md">
<ui5-label required class="fd-margin-end--tiny">Product Description</ui5-label>
<ui5-textarea
placeholder="Enter product description"
[value]="productDescription()"
[rows]="4"
(ui5Input)="onProductDescriptionChange($event)"
></ui5-textarea>
</div>
</div>
} @if ($index === 1) {
<!-- Step 2: Pricing -->
<ui5-title level="H3">{{ step.titleText }}</ui5-title>
<ui5-text>Select a pricing plan for your product.</ui5-text>

<div class="fd-margin-top--md" [style]="{ display: 'flex', 'flex-direction': 'column'}">
<ui5-radio-button
name="pricing"
text="Basic - $9.99/month"
[checked]="selectedPrice() === 'basic'"
(ui5Change)="onPriceChange('basic')"
class="fd-margin-end--sm"
></ui5-radio-button>
<ui5-radio-button
name="pricing"
text="Professional - $29.99/month"
[checked]="selectedPrice() === 'professional'"
(ui5Change)="onPriceChange('professional')"
class="fd-margin-end--sm"
></ui5-radio-button>
<ui5-radio-button
name="pricing"
text="Enterprise - $99.99/month"
[checked]="selectedPrice() === 'enterprise'"
(ui5Change)="onPriceChange('enterprise')"
></ui5-radio-button>
</div>
} @if ($index === 2) {
<!-- Step 3: Delivery Options -->
<ui5-title level="H3">{{ step.titleText }}</ui5-title>
<ui5-text>Choose your preferred delivery method and additional options.</ui5-text>

@if (!step3Valid()) {
<ui5-message-strip design="Critical" [hideCloseButton]="true" class="fd-margin-top--sm">
Please select a delivery method.
</ui5-message-strip>
}

<div class="fd-margin-top--md" [style]="{ display: 'flex', 'flex-direction': 'column'}">
<ui5-checkbox
text="Standard Delivery (5-7 business days) - Free"
[checked]="standardDelivery()"
(ui5Change)="onStandardDeliveryChange($event)"
class="fd-margin-end--sm"
></ui5-checkbox>
<ui5-checkbox
text="Express Delivery (1-2 business days) - $15.00"
[checked]="expressDelivery()"
(ui5Change)="onExpressDeliveryChange($event)"
class="fd-margin-end--sm"
></ui5-checkbox>
<ui5-checkbox
text="Gift Wrap - $5.00"
[checked]="giftWrap()"
(ui5Change)="onGiftWrapChange($event)"
></ui5-checkbox>
</div>
} @if ($index === 3) {
<!-- Step 4: Contact Information -->
<ui5-title level="H3">{{ step.titleText }}</ui5-title>
<ui5-text>Provide your contact information for order updates.</ui5-text>

@if (!step4Valid() && customerName().length > 0) {
<ui5-message-strip design="Critical" [hideCloseButton]="true" class="fd-margin-top--sm">
Please fill in all required fields with valid information.
</ui5-message-strip>
}

<div class="fd-margin-top--md">
<div class="fd-margin-bottom--md">
<ui5-label required class="fd-margin-end--tiny">Full Name</ui5-label>
<ui5-input
placeholder="Enter your full name"
[value]="customerName()"
(ui5Input)="onCustomerNameChange($event)"
></ui5-input>
</div>

<div class="fd-margin-bottom--md">
<ui5-label required class="fd-margin-end--tiny">Email Address</ui5-label>
<ui5-input
type="Email"
placeholder="Enter your email"
[value]="customerEmail()"
(ui5Input)="onCustomerEmailChange($event)"
></ui5-input>
</div>

<div class="fd-margin-bottom--md">
<ui5-label class="fd-margin-end--tiny">Phone Number</ui5-label>
<ui5-input
type="Tel"
placeholder="Enter your phone number"
[value]="customerPhone()"
(ui5Input)="onCustomerPhoneChange($event)"
></ui5-input>
</div>
</div>
} @if ($index === 4) {
<!-- Step 5: Summary -->
<ui5-title level="H3">{{ step.titleText }}</ui5-title>
<ui5-text>Review your information before submitting.</ui5-text>

<ui5-message-strip
design="Positive"
[hideCloseButton]="true"
class="fd-margin-top--sm fd-margin-bottom--md"
>
All steps completed! Please review your information below.
</ui5-message-strip>

<div class="fd-margin-bottom--md">
<ui5-title level="H5">Product Information</ui5-title>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Product Name:</ui5-text>
<ui5-text>{{ productName() }}</ui5-text>
</div>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Description:</ui5-text>
<ui5-text>{{ productDescription() }}</ui5-text>
</div>
</div>

<div class="fd-margin-bottom--md">
<ui5-title level="H5">Pricing</ui5-title>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Selected Plan:</ui5-text>
<ui5-text>
@if (selectedPrice() === 'basic') { Basic - $9.99/month } @else if (selectedPrice() ===
'professional') { Professional - $29.99/month } @else { Enterprise - $99.99/month }
</ui5-text>
</div>
</div>

<div class="fd-margin-bottom--md">
<ui5-title level="H5">Delivery Options</ui5-title>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Delivery Method:</ui5-text>
<ui5-text>
@if (standardDelivery()) { Standard Delivery (Free) } @else if (expressDelivery()) { Express
Delivery ($15.00) }
</ui5-text>
</div>
@if (giftWrap()) {
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Additional:</ui5-text>
<ui5-text>Gift Wrap ($5.00)</ui5-text>
</div>
}
</div>

<div class="fd-margin-bottom--md">
<ui5-title level="H5">Contact Information</ui5-title>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Name:</ui5-text>
<ui5-text>{{ customerName() }}</ui5-text>
</div>
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Email:</ui5-text>
<ui5-text>{{ customerEmail() }}</ui5-text>
</div>
@if (customerPhone()) {
<div class="fd-margin-bottom--tiny" [style]="{display: 'flex', gap: '0.5rem'}">
<ui5-text style="font-weight: bold">Phone:</ui5-text>
<ui5-text>{{ customerPhone() }}</ui5-text>
</div>
}
</div>
}

<!-- Navigation Buttons -->
<div
class="fd-margin-top--lg"
style="padding-top: 1rem; border-top: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)"
>
<ui5-button [disabled]="!canGoPrevious()" (ui5Click)="goToPreviousStep()" class="fd-margin-end--sm">
Previous
</ui5-button>

@if (!isLastStep()) {
<ui5-button design="Emphasized" [disabled]="!canGoNext()" (ui5Click)="goToNextStep()">
Next
</ui5-button>
} @else {
<ui5-button design="Emphasized" [disabled]="!canSubmit()" (ui5Click)="submitWizard()">
Submit
</ui5-button>
}
</div>
</div>
</ui5-wizard-step>
}
</ui5-wizard>
</div>
Loading