Help with own Template for Custom Wizard Steps

[Former Member]

Hi all,

I´ve tried to create a Custom Wizard Step in a template which I develop, but I´m struggling with this Documentation. https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#/topic/3077337abe2c42b885af557d3ddbedb...

I couldn´t find a documentation, which really helps me further. So I hope that anyone here could Help me with my Problem.

Here´s a Snippet from my plugin.json.

  "requires": {
        "services": [
            "template",
            "templateCustomizationStep",
            "customstep",
            "wizard"
        ]
    },
    "provides": {
        "services": {
        	"customstep":{
        		"implements":"sap.watt.common.service.ui.WizardStep",
        		"module":"control/customstep"
        	}
        },
        "interfaces": {}
    },
    "configures": {
        "services": {
            "template:templates": [
                {
                    "id": "abatWizardTemplate.sapui5withwizardconfiguration",
                    "template": "abat_wizard_template_plugin/sapui5withwizardconfiguration/sapui5withwizardconfiguration",
                    "name": "{i18n>Config_template_sapui5withwizardconfiguration_name}",
                    "description": "{i18n>Config_template_sapui5withwizardconfiguration_desc}",
                    "path": "abat_wizard_template_plugin/sapui5withwizardconfiguration",
                    "icon": "sap-icon://detail-view",
                    "internalOnly": false,
                    "category": "abattemplates",
                    "wizardSteps": [
                        "templateCustomizationStep",
                        "customstep"
                        
                    ],

My customstep.js

This is where I actually really need help.

jQuery.sap.declare("wizard_template_plugin.control.customstep");
jQuery.sap.require("sap.watt.ideplatform.plugin.template.ui.wizard.WizardStepContent");


sap.watt.ideplatform.plugin.template.ui.wizard.WizardStepContent.extend("wizard_template_plugin.control.customstep",
{
	// Define the SAPUI5 control's metadata  
	metadata : {
		properties : {
			
		}
	},


	init : function() {


		// Create your UI here.	
	
	},


	setFocusOnFirstItem : function() {
	
		 // Call the focus() method for your first UI element.	
		 this.serviceUrlTextField.focus();
	},


	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.
	},


	renderer : {},


	// Overwrite this SAPUI5 control method if you have some logic to implement here
	onAfterRendering : function() {
		
	},
	
	// Overwrite this SAPUI5 control method if you have some logic to implement here
	onBeforeRendering : function() {
		
		// Make sure to first call this method implementation in the
		// WizardStepContent base class
		if (sap.watt.ideplatform.plugin.template.ui.wizard.WizardStepContent.prototype.onBeforeRendering){
			sap.watt.ideplatform.plugin.template.ui.wizard.WizardStepContent.prototype.
												onBeforeRendering.apply(this, arguments);
		}
		
		// Implement your logic here
	}


});

Here is my app structure, because i´m not sure if everything is in place.

I appreciate any answer that could help me, even if it´s just a little bit. I am a absolute beginner to UI5, so thanks in advance for your help.

regards.

Chris

[Former Member]

Sorry for the spam, but I got along with the first task.

Now when I try to create the new template in debug mode i get the following Error:

oContext.service[sStepName].getContent is not a function.

Here is my myCustomStep.js.

define({


	getContent: function() {
		jQuery.sap.require("abat_wizard_template_plugin.control.customstep");
		var oMyStepContent = new abat_wizard_template_plugin.control.customstep({
			context: this.context
		});


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


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

Thanks in advance.

[Former Member]

after I remastered my project, I get the following Error when I try to build a new project with my template. Would you be able to assist?

Best Regards

[former_member239103]

To understand SAPUI5 go through the Walkthrough.

For wizard layout check out the m.Wizard control.

You can also create your own custom controls that can be used in the Wizard container.