Wizard edit mode
Demonstrates the usage of the setCurrentStep association, which controlls the current step of the wizard.
Z2UI5_CL_SMPC_APP_534
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_534- Source file
z2ui5_cl_smpc_app_534.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.Wizard- Demo kit sample
sap.m.sample.WizardCurrentStep- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: wizard, sap.m, wizardcurrentstep, navcontainer, bar, segmentedbutton, segmentedbuttonitem, label, select, item, wizardstep, messagestrip
Controls it builds
- sap.m.Bar
- sap.m.CheckBox
- sap.m.ComboBox
- sap.m.DatePicker
- sap.m.HBox
- sap.m.Input
- sap.m.Label
- sap.m.MessageStrip
- sap.m.MultiComboBox
- sap.m.NavContainer
- sap.m.Page
- sap.m.RadioButton
- sap.m.RadioButtonGroup
- sap.m.SegmentedButton
- sap.m.SegmentedButtonItem
- sap.m.Select
- sap.m.Text
- sap.m.TextArea
- sap.m.Wizard
- sap.m.WizardStep
- sap.ui.core.Item
- sap.ui.core.mvc.View
- sap.ui.layout.form.SimpleForm
- sap.ui.unified.FileUploader
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_534.clas.abap — 619 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords wizard sap.m wizardcurrentstep navcontainer bar segmentedbutton segmentedbuttonitem label select item wizardstep messagestrip
" @summary Demonstrates the usage of the setCurrentStep association, which controlls the current step of the wizard.
CLASS z2ui5_cl_smpc_app_534 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA selectedshowcase TYPE string.
DATA selectedbackgrounddesign TYPE string.
DATA linearwizardselectedstep TYPE string.
DATA branchingselectedstep TYPE string.
DATA product_name TYPE string.
DATA product_name_state TYPE string.
DATA product_weight TYPE string.
DATA product_weight_state TYPE string.
DATA product_manufacturer TYPE string.
DATA product_description TYPE string.
DATA product_price TYPE string.
DATA product_vat TYPE abap_bool.
DATA step2_validated TYPE abap_bool.
DATA path_index TYPE i.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS path_apply.
METHODS info_validate.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_534 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
model_init( ).
view_display( ).
ELSEIF client->check_on_navigated( ).
view_display( ).
ELSEIF client->check_on_event( ).
on_event( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->a( n = `xmlns:u` v = `sap.ui.unified`
)->a( n = `xmlns` v = `sap.m`
)->ele( `NavContainer`
)->a( n = `id` v = `wizardNavContainer`
)->ele( `pages`
)->ele( `Page`
)->a( n = `id` v = `wizardContentPage`
)->a( n = `showHeader` v = `true`
)->ele( `customHeader`
)->ele( `Bar`
)->ele( `contentRight`
)->ele( `SegmentedButton`
)->a( n = `selectedKey` v = client->_bind( selectedshowcase )
)->ele( `items`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `Linear case`
)->a( n = `key` v = `linear`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `Branching case`
)->a( n = `key` v = `branching`
)->a( n = `width` v = `150px`
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( `subHeader`
)->ele( `Bar`
)->ele( `contentRight`
)->tag( `Label`
)->a( n = `text` v = `Set current step: `
)->ele( `Select`
)->a( n = `change` v = client->_event( val = `CURRENT_STEP_LINEAR` arg = `${$parameters>/selectedItem}.getKey()` )
)->a( n = `selectedKey` v = client->_bind( linearwizardselectedstep )
)->a( n = `visible` v = |\{= ${ client->_bind( selectedshowcase ) } === 'linear'\}|
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `ProductTypeStep`
)->a( n = `key` v = `ProductTypeStep`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `ProductInfoStep`
)->a( n = `key` v = `ProductInfoStep`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `OptionalInfoStep`
)->a( n = `key` v = `OptionalInfoStep`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `PricingStep`
)->a( n = `key` v = `PricingStep`
)->end(
)->ele( `Select`
)->a( n = `id` v = `selectBranchingCurrentStep`
)->a( n = `change` v = client->_event( val = `CURRENT_STEP_BRANCHING` arg = `${$parameters>/selectedItem}.getKey()` )
)->a( n = `selectedKey` v = client->_bind( branchingselectedstep )
)->a( n = `visible` v = |\{= ${ client->_bind( selectedshowcase ) } === 'branching'\}|
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `A`
)->a( n = `key` v = `A`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `B1`
)->a( n = `key` v = `B1`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `B2`
)->a( n = `key` v = `B2`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `C`
)->a( n = `key` v = `C`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `D`
)->a( n = `key` v = `D`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `E`
)->a( n = `key` v = `E`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `F1`
)->a( n = `key` v = `F1`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `F2`
)->a( n = `key` v = `F2`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `G`
)->a( n = `key` v = `G`
)->end(
)->end(
)->end(
)->end(
)->ele( `content`
" the two nested XMLViews are inlined here (see sidecar):
" the Linear wizard first, the Branching wizard second,
" each with the visible expression the original gives its
" mvc:XMLView
)->ele( `Wizard`
)->a( n = `id` v = `CreateProductWizard`
)->a( n = `backgroundDesign` v = client->_bind( selectedbackgrounddesign )
)->a( n = `finishButtonText` v = `Finish`
)->a( n = `currentStep` v = `PricingStep`
)->a( n = `visible` v = |\{= ${ client->_bind( selectedshowcase ) } === 'linear' \}|
)->a( n = `class` v = `sapUiResponsivePadding--header sapUiResponsivePadding--content`
)->ele( `WizardStep`
)->a( n = `id` v = `ProductTypeStep`
)->a( n = `title` v = `Product Type`
)->a( n = `activate` v = client->_event( val = `ACTIVATE_LINEAR` arg = `ProductTypeStep` )
)->tag( `MessageStrip`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `text` v = `The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.`
)->a( n = `showIcon` v = `true`
)->tag( `Text`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `text` v = `Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. ` &&
`Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. ` &&
`Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. ` &&
`Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. ` &&
`Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat`
)->ele( `HBox`
)->a( n = `alignItems` v = `Center`
)->a( n = `justifyContent` v = `Center`
)->a( n = `width` v = `100%`
)->ele( `SegmentedButton`
)->a( n = `width` v = `320px`
)->ele( `items`
)->tag( `SegmentedButtonItem`
)->a( n = `icon` v = `sap-icon://iphone`
)->a( n = `text` v = `Mobile`
)->tag( `SegmentedButtonItem`
)->a( n = `icon` v = `sap-icon://sys-monitor`
)->a( n = `text` v = `Desktop`
)->tag( `SegmentedButtonItem`
)->a( n = `icon` v = `sap-icon://database`
)->a( n = `text` v = `Other`
)->end(
)->end(
)->end(
)->end(
)->ele( `WizardStep`
)->a( n = `id` v = `ProductInfoStep`
)->a( n = `title` v = `Product Information`
)->a( n = `validated` v = client->_bind( step2_validated )
)->a( n = `activate` v = client->_event( val = `ACTIVATE_LINEAR` arg = `ProductInfoStep` )
)->tag( `MessageStrip`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `text` v = `Validation in the wizard is controlled by calling the validateStep(Step) and invalidateStep(Step) methods `
)->a( n = `showIcon` v = `true`
)->tag( `Text`
)->a( n = `text` v = `Cras tellus leo, volutpat vitae ullamcorper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. ` &&
`Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien et viverra imperdiet, orci erat porttitor nulla, ` &&
`eget commodo metus nibh nec ipsum. Aliquam lacinia euismod metus, sollicitudin pellentesque purus volutpat eget. Pellentesque egestas erat quis eros convallis mattis.`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `Name`
)->a( n = `required` v = `true`
)->tag( `Input`
)->a( n = `valueStateText` v = `Enter 6 symbols or more`
)->a( n = `valueState` v = client->_bind( product_name_state )
)->a( n = `id` v = `ProductName`
)->a( n = `change` v = client->_event( `VALIDATE_INFO` )
)->a( n = `placeholder` v = `Enter name with length greater than 6`
)->a( n = `value` v = client->_bind( product_name )
)->tag( `Label`
)->a( n = `text` v = `Weight`
)->a( n = `required` v = `true`
)->tag( `Input`
)->a( n = `valueStateText` v = `Enter digits`
)->a( n = `valueState` v = client->_bind( product_weight_state )
)->a( n = `id` v = `ProductWeight`
)->a( n = `change` v = client->_event( `VALIDATE_INFO` )
)->a( n = `type` v = `Number`
)->a( n = `placeholder` v = `Enter digits`
)->a( n = `value` v = client->_bind( product_weight )
)->tag( `Label`
)->a( n = `text` v = `Manufacturer`
)->ele( `Select`
)->a( n = `selectedKey` v = client->_bind( product_manufacturer )
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Apple`
)->a( n = `text` v = `Apple`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Microsoft`
)->a( n = `text` v = `Microsoft`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Google`
)->a( n = `text` v = `Google`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Sony`
)->a( n = `text` v = `Sony`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Samsung`
)->a( n = `text` v = `Samsung`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Logitech`
)->a( n = `text` v = `Logitech`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Description`
)->tag( `TextArea`
)->a( n = `value` v = client->_bind( product_description )
)->a( n = `rows` v = `8`
)->end(
)->end(
)->ele( `WizardStep`
)->a( n = `id` v = `OptionalInfoStep`
)->a( n = `optional` v = `true`
)->a( n = `title` v = `Additional Information`
)->a( n = `activate` v = client->_event( val = `ACTIVATE_LINEAR` arg = `OptionalInfoStep` )
)->tag( `MessageStrip`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `text` v = `You can validate steps by default with the validated='true' property of the step. The next button is always enabled.`
)->a( n = `showIcon` v = `true`
)->tag( `Text`
)->a( n = `text` v = `Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. ` &&
`Donec pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. ` &&
`Donec pulvinar, sapien corper eu, posuere malesuada nisl.`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `Cover photo`
)->tag( n = `FileUploader` ns = `u`
)->a( n = `width` v = `400px`
)->a( n = `tooltip` v = `Upload product cover photo to the local server`
)->a( n = `style` v = `Emphasized`
)->a( n = `placeholder` v = `Choose a file for Upload...`
)->tag( `Label`
)->a( n = `text` v = `Manufacturing date`
)->tag( `DatePicker`
)->a( n = `id` v = `DP3`
)->a( n = `displayFormat` v = `short`
)->tag( `Label`
)->a( n = `text` v = `Availability`
)->ele( `SegmentedButton`
)->a( n = `selectedItem` v = `inStock`
)->ele( `items`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `In store`
)->a( n = `id` v = `inStock`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `In depot`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `In repository`
)->tag( `SegmentedButtonItem`
)->a( n = `text` v = `Out of stock`
)->end(
)->end(
)->tag( `Label`
)->a( n = `text` v = `Size`
)->tag( `Input`
)->ele( `ComboBox`
)->a( n = `maxWidth` v = `100px`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `X`
)->a( n = `text` v = `X`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Y`
)->a( n = `text` v = `Y`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Z`
)->a( n = `text` v = `Z`
)->end(
)->end(
)->end(
)->ele( `WizardStep`
)->a( n = `id` v = `PricingStep`
)->a( n = `title` v = `Pricing`
)->a( n = `activate` v = client->_event( val = `ACTIVATE_LINEAR` arg = `PricingStep` )
)->tag( `MessageStrip`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `text` v = `You can use the wizard previousStep() and nextStep() methods to navigate from step to step without validation. ` &&
`Also you can use the GoToStep(step) method to scroll programmatically to previously visited steps.`
)->a( n = `showIcon` v = `true`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `Price`
)->tag( `Input`
)->a( n = `value` v = client->_bind( product_price )
)->tag( `Label`
)->a( n = `text` v = `Discount group`
)->ele( `MultiComboBox`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Kids`
)->a( n = `text` v = `Kids`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Teens`
)->a( n = `text` v = `Teens`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Adults`
)->a( n = `text` v = `Adults`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `Elderly`
)->a( n = `text` v = `Elderly`
)->end(
)->tag( `Label`
)->a( n = `text` v = ` VAT is included`
)->tag( `CheckBox`
)->a( n = `selected` v = client->_bind( product_vat )
)->end(
)->end(
)->end(
)->ele( `Wizard`
)->a( n = `id` v = `BranchingWizard`
)->a( n = `backgroundDesign` v = client->_bind( selectedbackgrounddesign )
)->a( n = `enableBranching` v = `true`
)->a( n = `visible` v = |\{= ${ client->_bind( selectedshowcase ) } === 'branching' \}|
)->a( n = `class` v = `sapUiResponsivePadding--header sapUiResponsivePadding--content`
)->ele( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `A`
)->a( n = `title` v = `A`
)->a( n = `subsequentSteps` v = `B1, B2`
)->ele( `RadioButtonGroup`
)->a( n = `id` v = `PathSelection`
)->a( n = `select` v = client->_event( val = `APPLY_PATH` arg = `${$parameters>/selectedIndex}` )
)->ele( `buttons`
)->tag( `RadioButton`
)->a( n = `text` v = `A->B1->C->D->E->F1->F2->G`
)->tag( `RadioButton`
)->a( n = `text` v = `A->B2->C->D->E->F1->G`
)->tag( `RadioButton`
)->a( n = `text` v = `A->B1->B2->C->D->E`
)->end(
)->end(
)->end(
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `B1`
)->a( n = `title` v = `B1`
)->a( n = `nextStep` v = `C`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `B2`
)->a( n = `title` v = `B2`
)->a( n = `nextStep` v = `C`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `C`
)->a( n = `title` v = `C`
)->a( n = `nextStep` v = `D`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `D`
)->a( n = `title` v = `D`
)->a( n = `nextStep` v = `E`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `E`
)->a( n = `title` v = `E`
)->a( n = `subsequentSteps` v = `F1, F2`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `F1`
)->a( n = `title` v = `F1`
)->a( n = `nextStep` v = `G`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `F2`
)->a( n = `title` v = `F2`
)->a( n = `nextStep` v = `G`
)->tag( `WizardStep`
)->a( n = `validated` v = `false`
)->a( n = `id` v = `G`
)->a( n = `title` v = `G`
)->end(
)->end(
)->ele( `footer`
)->ele( `Bar`
)->ele( `contentRight`
)->tag( `Label`
)->a( n = `text` v = `Set background design: `
)->ele( `Select`
)->a( n = `change` v = client->_event( val = `BACKGROUND_DESIGN` arg = `${$parameters>/selectedItem}.getKey()` )
)->a( n = `selectedKey` v = client->_bind( selectedbackgrounddesign )
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Standard`
)->a( n = `key` v = `Standard`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Solid`
)->a( n = `key` v = `Solid`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `List`
)->a( n = `key` v = `List`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Transparent`
)->a( n = `key` v = `Transparent` ).
client->view_display( view->stringify( ) ).
" Branching.controller does applyPath( 0 ) in onAfterRendering - on EVERY
" render, not once. The nextStep associations are live control state that a
" rebuilt view resets to what the XML declares, and the two branch points A
" and E declare none at all (only subsequentSteps), so without this they sit
" at null: measured on the built backend, A and E came back next=NULL while
" every linear step carried its declared nextStep. The port used to set them
" only from the RadioButtonGroup's select event, which never fires for the
" already-selected button 0, so a freshly loaded wizard was never wired
path_apply( ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `CURRENT_STEP_LINEAR`.
" onCurrentStepChangeLinear: setCurrentStep on the linear wizard
linearwizardselectedstep = client->get_event_arg( ).
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `CreateProductWizard` ) ( `goToStep` ) ( linearwizardselectedstep ) ) ).
WHEN `CURRENT_STEP_BRANCHING`.
" onCurrentStepChangeBranching: setCurrentStep on the branching wizard
branchingselectedstep = client->get_event_arg( ).
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `BranchingWizard` ) ( `goToStep` ) ( branchingselectedstep ) ) ).
WHEN `BACKGROUND_DESIGN`.
" onBackgroundDesignChange sets the design on BOTH wizards
selectedbackgrounddesign = client->get_event_arg( ).
WHEN `ACTIVATE_LINEAR`.
" onActivate syncs the Select with the step that just activated and
" revalidates the product-information step
linearwizardselectedstep = client->get_event_arg( ).
IF linearwizardselectedstep = `ProductInfoStep`.
info_validate( ).
ENDIF.
WHEN `VALIDATE_INFO`.
info_validate( ).
WHEN `APPLY_PATH`.
" discardAndApplyPath discards the progress, resets the Select and
" rewires the path the picked radio button spells out
path_index = client->get_event_arg( ).
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `BranchingWizard` ) ( `discardProgress` ) ( `A` ) ) ).
branchingselectedstep = `A`.
path_apply( ).
ENDCASE.
ENDMETHOD.
METHOD path_apply.
" applyPath reads the picked radio button's TEXT and setNextStep's its way
" down the arrow-separated path, clearing the last step's nextStep
DATA(paths) = VALUE string_table( ( `A->B1->C->D->E->F1->F2->G` )
( `A->B2->C->D->E->F1->G` )
( `A->B1->B2->C->D->E` ) ).
IF path_index < 0 OR path_index >= lines( paths ).
RETURN.
ENDIF.
SPLIT paths[ path_index + 1 ] AT `->` INTO TABLE DATA(steps).
LOOP AT steps INTO DATA(step).
DATA(idx) = sy-tabix.
IF idx < lines( steps ).
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( step ) ( `setNextStep` ) ( steps[ idx + 1 ] ) ) ).
ELSE.
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( step ) ( `setNextStep` ) ( `` ) ) ).
ENDIF.
ENDLOOP.
ENDMETHOD.
METHOD info_validate.
" validateProdInfoStep: a name of at least six characters and a numeric weight
DATA(name_ok) = xsdbool( strlen( product_name ) >= 6 ).
DATA(weight_ok) = xsdbool( product_weight IS NOT INITIAL AND product_weight CO `0123456789.` ).
product_name_state = COND #( WHEN name_ok = abap_true THEN `None` ELSE `Error` ).
product_weight_state = COND #( WHEN weight_ok = abap_true THEN `None` ELSE `Error` ).
step2_validated = xsdbool( name_ok = abap_true AND weight_ok = abap_true ).
ENDMETHOD.
METHOD model_init.
" the controller's JSONModel seed
selectedbackgrounddesign = `Standard`.
selectedshowcase = `linear`.
linearwizardselectedstep = `PricingStep`.
branchingselectedstep = `A`.
path_index = 0.
product_name_state = `None`.
product_weight_state = `None`.
" the Linear view declares no validated attribute, so every step starts
" VALIDATED - which is what lets currentStep="PricingStep" hold on startup;
" validateProdInfoStep is the only thing that ever clears it
step2_validated = abap_true.
ENDMETHOD.
ENDCLASS.
More in sap.m
- List - Deletion — Setting 'Delete' mode on a List means you can trigger the deletion of single items with a…
- List - Growing Upwards — The Upwards Growing
- Overflow Toolbar - layout — Overflow Toolbar can contain the same controls as Toolbar with the added benefit that but…
- QuickView with Different Configurations of Avatar — QuickView with fallback icon, initials, display shape and other avatar properties.
- QuickView with Navigation and Data Binding — QuickView using navOrigin parameter when navigating.
- Wizard page mode — Demonstrates the usage of the renderMode property. The Wizard is displayed inside a Dialo…
- Wizard branching use case — The Wizard could be used in branching mode, where the choice of next step depends on the…
- simple Planning Calendar — PlanningCalendar with single row selection that illustrates the built-in views.
- Planning Calendar - with custom views — PlanningCalendar with custom views to set number of hours, days and months and change vie…
- Planning Calendar - multiple selection — PlanningCalendar with multiple row selection. No interval headers are displayed. On click…
- Planning Calendar - with one line appointments and multiple appointments selection option — PlanningCalendar showing appointment with only title in one line to save space. The inter…
- Planning Calendar - with min. and max. date — PlanningCalendar with min. date 2000-01-01 and max. date 2050-12-31
On this page