abap2UI5

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

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 — 620 lines 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.
" @origin sap.m.sample.WizardCurrentStep - https://sdk.openui5.org/entity/sap.m.Wizard/sample/sap.m.sample.WizardCurrentStep (status: generated - machine-written, not yet reviewed)
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 productname         TYPE string.
    DATA productnamestate    TYPE string.
    DATA productweight       TYPE string.
    DATA productweightstate  TYPE string.
    DATA productmanufacturer TYPE string.
    DATA productdescription  TYPE string.
    DATA productprice        TYPE string.
    DATA productvat          TYPE abap_bool.
    DATA step2_validated     TYPE abap_bool.

  PROTECTED SECTION.
    DATA client     TYPE REF TO z2ui5_if_client.
    DATA path_index TYPE i.

    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( productnamestate )
                                        )->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( productname )
                                    )->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( productweightstate )
                                        )->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( productweight )
                                    )->tag( `Label`
                                        )->a( n = `text` v = `Manufacturer`

                                    )->ele( `Select`
                                        )->a( n = `selectedKey` v = client->_bind( productmanufacturer )

                                        )->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( productdescription )
                                        )->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( productprice )
                                    )->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( productvat )

                                )->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( productname ) >= 6 ).
    DATA(weight_ok) = xsdbool( productweight IS NOT INITIAL AND productweight CO `0123456789.` ).

    productnamestate   = COND #( WHEN name_ok   = abap_true THEN `None` ELSE `Error` ).
    productweightstate = 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.
    productnamestate       = `None`.
    productweightstate     = `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

Search every abap2UI5 sample · the full list on one page

On this page