SAP Web IDE Custom Wizard Step

[WouterLemaire]

I have blogged in the past about creating your own SAP Web IDE Wizard. In that blog, I only used wizard steps that SAP provides out-of-the-box which you can use and customize:

https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-configure-the-wizard/

Now, in this blog, I’m going to show you how you can create a custom wizard step in your custom wizard ? A complete custom wizard step will allow you to have full control and do anything you like with it.

This blog contains the following sections:

• Create Extension


• Create Wizard


• Create a custom wizard step


• Use the custom wizard step in the wizard


• Store values in the wizard step

Let's start with the first part.

Create Extension

We start the same way like we did for the custom wizard and create a new SAP Web IDE Extension project. File -> New -> Project From Template -> SAP Web IDE Extension



Give the extension a name like “MyCustomWizardStep”



Fill in a technical name for the extension and description + a name for a first plugin in your extension and description:

Create a wizard

Now, create a starting point for the wizard by using an Existing template: Right click on the created folder of the plugin -> New -> Template from Existing Template

Just as a side note: Wizards are meant to generate projects, to do so it’s using template files which will have a different output based on the configuration in the wizard.



Give a name to your template and a description. The name will be used to show the wizard name in the menu or the new project wizard.

I’m going to create a wizard for a component instead of a new project and I’m just using the “General” category for it.



As a starting point for my template, I’m going to use the “SAPUI5 View”. This is good and basic example to understand how templates work and easy to start from.



Let’s see what the SAP Web IDE already has generated for me. Test the wizard by right click on the package.json -> Run -> Run As SAP Web IDE Extension



Right click on one of your existing UI5 projects ( or create a new project ) -> New -> you’ll see the name of your newly created Wizard.



Click on it and you’ll get the following message…



Don’t worry, this is normal. Let’s solve this?

Go to the plugin.json



And add the following services:



If you run it again or refresh the browser window with SAP Web IDE in debug, you’ll get the following view when you start the wizard

Create a custom wizard step

This is where the fun starts, I’m going to create a custom wizard step. First step, create a control. The control will contain the layout and the logic of a custom wizard step. Right click on the folder “control” -> New -> File



Give the file the same name as the name you want for the custom wizard step:



Put the following code in the file. In this code happens the following:

• Extend from WizardStepContent


• Init will create the layout by using SAPUI5 controls and add it to the content


• _createPageContent is just my own function to generate the layout which will be called by the init function

Just for demo purpose, I’m only going to add a label

define(["sap.watt.ideplatform.template/ui/wizard/WizardStepContent"	],

	function (WizardStepContent) {

	"use strict";



	jQuery.sap.declare("mycsutomwizardstepplugin.control.MyCustomWizardStep");

	return WizardStepContent.extend("mycsutomwizardstepplugin.control.MyCustomWizardStep", {



		init: function () {

			var oPageStepContent = this._createPageContent();

			this.addContent(oPageStepContent);

		},

		renderer: {},

		onBeforeRendering: function () {

		},

		_createPageContent: function () {

			var oLabel = new sap.m.Label({text:"Hello Custom Wizard Step"});

			return oLabel;

		},

		validateStepContent: function () {

			// Return a Q-promise which is resolved if the step content 

			// is currently in valid state, and is rejected if not.

		},

		cleanStep: function () {

			// 1. Clean properties that were added to this.getModel().getData().

			// 2. Clean the control's private members.

			// 3. Clean the UI controls created by this control

			//    that are not currently displayed.

			//    Currently displayed content is destroyed by the wizard before

			//    this step is displayed again.

		}

	});

});

Besides the control, I also need to create a service. Right click on the “service” folder -> New -> File



Use the same name as the name that you’ve used for the control to keep it simple.



Paste the following code in it. This code will create an instance of the control and make a wizard step out of it.

define(["mycsutomwizardstepplugin/control/MyCustomWizardStep"], function(MyCustomWizardStep){

       "use strict"

       return{

        getContent : function() {

              var oMyStepContent = new MyCustomWizardStep({

                     context : this.context

              });

 

              var sTitle = this.context.i18n.getText("Config_template_mycustomwizard_desc");

              var sDescription = this.context.i18n.getText("myStep_description");

  

              return this.context.service.wizard.createWizardStep(oMyStepContent,sTitle, sDescription);

        }

    }

});

You have now created your own wizard step. Next, we're going to use this step in the wizard.

Use the custom wizard step in the wizard

The wizard step is ready to use. I only need to configure my wizard to use my custom wizard step.

Define your service in the plugin.json like this:

• Implements should always be “sap.watt.common.service.ui.WizardStep”


• Module contains the path to your custom wizard step service

Add the service as a wizardstep with the name that you have used for the definition of your service in the previous config:



When you test again, you’ll see our label on the first step of the wizard!

Store values in the wizard step

We can share data between steps by using bindings. If we change the label to an input field and bind it to a field “CustomInputValue” in the model like this:



If you test now, you’ll notice that you’re not able to click on the “Next” button:



We need to trigger the event validation with parameter isValid to true



Then, you’ll be able to click on the “Next” button:



We’re able to access the value of the input field in the next steps by accessing “this.getModel().getProperty(“/CustomInputValue”)”. At the end, the wizard will trigger the function “onBeforeTemplateGenerate” in the “mycustomwizard.js” file (can be different depending on the name of your wizard). In this function, you get the model as an argument:



That's all you need to know to create your own wizard step. I used this approach for the new version of the custom control generator:

https://blogs.sap.com/2018/09/04/ui5-control-generator-v2-sap-web-ide-template/

Have fun and create your own wizard! 🙂

Kr, Wouter