Show TOC Start of Content Area

Procedure documentation Creating Wizards  Locate the document in its SAP Library structure

To create a wizard, create a Web Dynpro development component with a component that defines the following:

      Implemented Interfaces: IWizard, which defines a set of context attributes that provide information to the wizard, such as the name of the portal object being edited. The interface also defines a set of methods to be implemented, most in order to respond to administrator actions.

      Views: One view for each custom pane in your wizard.

      Used Components: An IWFContainer component interface definition, which runs your wizard component and provides APIs that your wizard can call.

In addition, you can also define used components that define predefined wizard panes, such as ISummary and IGeneralProperties.

      Windows: Two windows:

       One window (the window created when you create your component) holds an instance of the wizard framework component, which will provide services to your wizard.

       One window (IWizard) contains your wizard panes. The window is later embedded in the wizard framework component.

The following shows the Web Dynpro Explorer for a Web Dynpro project (newwiz) that defines a wizard (MyNewWizComp):

This graphic is explained in the accompanying text

The wizard project must also define an application, whose component is the wizard component.

Procedure

Set Up the Project

...

       1.      Create a Web Dynpro development component.

       2.      Set dependencies to the following DCs (SC listed in parentheses):

1.        tc/ep/admin/wd/api (EP-WDC)

2.        tc/ep/admin/api (EP-PSERV)

3.        tc/ep/pb/wd/api (EP-WDC)

       3.      Create a new component.

A view, window and interface view are automatically created.

       4.      Create a new window called IWizard.

       5.      Implement the IWizard component interface definition (package com.sap.portal.adminstudio.iwizard) as follows:

                            a.      Right-click Implemented Interfaces and select Add.

The Implement Component Interfaces window opens.

This graphic is explained in the accompanying text

                            b.      Click Add, select the IWizard interface, and click OK.

IWizard is now displayed as an implemented interface. The component interface view of IWizard is displayed, as well as all the current windows. The IWizard window is automatically set to implement the component interface view.

This graphic is explained in the accompanying text

                            c.      Click Finish.

The Implementation Results window is displayed, which shows all the windows, interface views, methods and other objects that are added to the project as a result of implementing IWizard.

When you expand the object tree, the following is displayed:

This graphic is explained in the accompanying text

                            d.      Click OK.

Note

After implementing the IWizard component interface definition, the project produces compilation errors until you implement the methods defined in the interface.

       6.      Add an IWFContainer component usage, as follows:

                            a.      Right-click Used Components and select Add Used Component. The New Web Dynpro Component Usage dialog opens.

                            b.      In the Name textbox, enter IWFContainer as the name for the used component.

                            c.      Next to the Used Web Dynpro Component field, click Browse and select IWFContainer, and then click OK.

                            d.      Click Finish.

       7.      Perform the following In the window created automatically with your component:

                            a.      Embed the IWFContainerinterface view, as follows:

                                                  i.       Delete the embedded view.

                                                ii.       Right-click and select Embed view.

                                               iii.       Select Embed Interface View of a Component Interface and click Next.

                                               iv.       Select WF_ContainerInterfaceView from the IWFContainer component.

                                                 v.       Click Finish.

                            b.      Create an instance of the IWFContainer component, as follows:

                                                  i.       In the window's Properties view, add the IWFContainer component usage and component interface controller as required controllers.

                                                ii.       Add the following code to the wdDoInit() method:

public voidwdDoInit()

{

  //@@begin wdDoInit()

  WizardFWUtils.createFWUsage(wdThis.wdGetIWFContainerComponentUsage());

  //@@end

}

 

       8.      Add the following code to the wdDoInit() method of the IWizard window:

public voidwdDoInit()

{

  //@@begin wdDoInit()

  WizardFWUtils.activateFWUsage(wdThis.wdGetIWFContainerComponentUsage());

  //@@end

}

Create Panes

...

       1.      Add a component usage for any predefined panes that you want to include in your wizard.

For example, the following adds the General Properties pane:

                            a.      Right-click Used Components and select Add Used Component. The New Web Dynpro Component Usage dialog opens.

                            b.      In the Name field, enter IGeneralProperties.

                            c.      Next to the Used Web Dynpro Component field, click Browse and select IGeneralProperties, and then click OK.

                            d.      Click Finish.

The following predefined panes are available (pane display name and component are shown in the Pane column):

Pane

Description

General Properties

com.sap.portal
  .adminstudio.igeneralpane
  .IGeneralProperties

Enables an administrator to enter a name, object ID, and other basic information for a new portal object.

Summary

com.sap.portal
  .adminstudio.isummarypane
  .ISummary

Displays a summary of all the basic information that was entered for a new portal object.

Finish

Indicates the wizard is finished, and enables the user to open the newly created object, restart the wizard, or close the wizard.

Note

This pane is added and configured by implementing the useFinishPane() method. You do not need to add a component usage.

       2.      Perform the following in the IWizard window:

                            a.      In the window's Properties view, add the following as required controllers:

       IWFContainer component usage and component interface controller

       Component controller

                            b.      For each predefined pane, add the corresponding component usage and component interface controller as required controllers.

For example, if you used the General Properties pane, add the IGeneralProperties component usage and component interface controller.

                            c.      For each predefined pane, add code to the wdDoInit() method to create an instance of the pane.

The following code adds instances for the General Properties and Summary panes.

public voidwdDoInit()

{

  //@@begin wdDoInit()

  wdThis.wdGetIGeneralPropertiesComponentUsage().createComponent(
      WizardFWAPIInfo.
GENERAL_PROPERTIES_NAME,
      WizardFWAPIInfo.
GENERAL_PROPERTIES_NAMESPACE);

  wdThis.wdGetIGeneralPropertiesInterface().setParamsHolderUsage(
     
wdThis.wdGetMyWizardCompController().wdGetContext()
      .currentWizardFWNodeElement().getParamsHolderComponentUsage());

 

 

  wdThis.wdGetISummaryComponentUsage().createComponent(
      WizardFWAPIInfo.
SUMMARY_NAME,
      WizardFWAPIInfo.
SUMMARY_NAMESPACE);

  wdThis.wdGetISummaryInterface().setParamsHolderUsage(
     
wdThis.wdGetMyWizardCompController().wdGetContext()
      .currentWizardFWNodeElement().getParamsHolderComponentUsage());

  //@@end

}

       3.      Create a view for each custom pane that you want to create for your wizard.

Use any logic or UI elements that you want. You can make use of the component controller context, which contains information about the portal object that triggered the wizard and information about the user input in predefined panes.

For more information on the component controller context, see Wizard Context.

Embed Panes in the IWizard Window

Perform the following in the IWizard window:

...

       1.      Embed the predefined panes as follows:

                            a.      Select the Navigation view.

                            b.      In the editor, right-click and select Embed View.

                            c.      Select Embed Interface View of a Component Interface, and click Next.

                            d.      Select the component interface view for the pane that you want to add.

                            e.      Click Finish.

       2.      Embed your custom panes as follows:

                            a.      Select the Navigation view.

                            b.      In the editor, right-click and select Embed View.

                            c.      Select Embed existing View, and click Next.

                            d.      Select the custom pane view.

                            e.      Click Finish.

       3.      Set the Default property for all the embedded views to false.

To display the property editor for a view, select the window’s Navigation view and select a view in the editor.

       4.      Create the navigation schema for the panes as follows:

                            a.      Create an outbound plug in the window for each pane (view).

                            b.      In each custom pane (view), create an inbound plug. Each predefined pane already has an inbound plug.

                            c.      Create a link from each outbound plug in the window to the corresponding inbound plug in the corresponding pane.

This graphic is explained in the accompanying text

 

Create Navigation Method

...

Perform the following in the IWizard window.

       1.      Add a method as follows:

                            a.      In the Methods area of the Methods view, click New.

                            b.      For Method Type, select Method, and then click Next.

                            c.      In the Name field, enter changePane.

                            d.      In the Return Type field, select void, and then click Next.

                            e.      Add a parameter called paneNumber of type integer.

                              f.      Click Finish.

       2.      In the changePane()method, add code to change the pane based on the paneNumber parameter.

For example, the following checks the paneNumber parameter and fires the plug for the corresponding view:

public void changePane(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, int paneNumber )

{

  //@@begin changePane(ServerEvent)

    

  switch(paneNumber) {

     case 1:

        wdThis.wdFirePlugGeneralProperties();

        break;

     case 2:

        wdThis.wdFirePlugCustom();

        break;

     case 3:

        wdThis.wdFirePlugSummary();

        break;

     default:

        break;

  }

  //@@end

}

 

Implement Methods for Responding to User Actions

...

       1.      Create and map the following context attribute:

                            a.      Component Controller:

       paneNumber (integer): The current pane to display.

                            b.      In the IWizard window:

       paneNumber (integer): The current pane to display. Map this attribute to the paneNumber attribute in the component controller.

       2.      In the component controller's Properties view, add the following as a required controllers:

       The component interface controller for each predefined pane added to the project.

       The IWizard window controller.

       3.      In the component controller, implement the following methods:

       doBeforeNext() / doBeforePrevious(): Called when Next or Previous is clicked. Use these methods to validate the user input and determine if the wizard should navigate to the next or previous pane.

Return true to invoke the doNext() / doPrevious() method.

       doNext() / doPrevious(): Called after the doBeforeNext() / doBeforePrevious()method returns true. Use these methods to navigate to the next or previous pane.

The following is a sample implementation:

publiccom.sap.portal.adminstudio.wizardfwapi.PaneController doNext( )  {

  //@@begin doNext()

  wdContext.currentContextElement()
    .setPaneNumber(
wdContext.currentContextElement().getPaneNumber()+1);

  wdThis.wdGetIWizardController()
    .changePane(
wdContext.currentContextElement().getPaneNumber());

 

  return null;

  //@@end

}

       doBeforeFinish(): Called when the Finish button is clicked. Use this method to validate the user input and determine whether the wizard can finish executing.

Return true to invoke doFinish() method.

       doFinish(): Called after the doBeforeFinish() returns true.

       useFinishPane(): Indicates whether to display the predefined Finish pane. If the Finish pane is to be displayed, the method specifies the options for the pane.

For more information, see Customizing the Finish Pane.

       getInitialStepsList(): Specifies the names of the steps in the wizard road map.

The following is a sample implementation:

publiccom.sap.portal.adminstudio.iroadmap.utils.RoadMapSteps getInitialStepsList( )  {

  //@@begin getInitialStepsList()

  RoadMapSteps roadmapsteps = newRoadMapSteps();

    

  roadmapsteps.addStep(wdThis
   
.wdGetIGeneralPropertiesInterface().getStepName());

  roadmapsteps.addStep("My Custom pane");

  roadmapsteps.addStep(wdThis.wdGetISummaryInterface().getStepName());

    

  returnroadmapsteps;

  //@@end

}

       getSubstepsList(): Specifies substeps for a split road map.

For more information, see Creating a Split Road Map.

       getActions(): Specifies dynamic actions to add to the Portal Catalog while the wizard runs, similar to adding actions for a work unit. For more information, see Adding Actions Dynamically.

You must implement all methods except doFinish(), as these have return values but no default implementations.

       4.      In the IWizard window's wdDoInit() method, navigate to the first pane, as follows;

public voidwdDoInit()

{

  //@@begin wdDoInit()

  wdContext.currentContextElement().setPaneNumber(1);

  wdThis.wdFirePlugGeneralProperties();

  //@@end

}

 

Deploy Wizard

...

       1.      Create an application for the project, and set the application's component to your wizard component.

       2.      Create an archive from the development component and deploy it.


Result

The new wizard application is listed under the development component in the Web Dynpro Application Repository in the portal.

You can create an iView from the application, and add it to an administration studio configuration. For example, you can create an action for a custom administration studio, and specify your wizard be run when the administrator selects the action.

For more information, see Actions.

 

End of Content Area