SAP Fiori Elements Overview Pages – Create Custom Cards using Web IDE Plugin

Now that you know about adding Custom Filters and adding other extensions like Custom Navigation parameters, targets and modify startup parameters, let us explore what the Web IDE extension for Custom Card offers. In this blog we will be adding a new personal tasks card.

To begin with let us use this project as the base

In SAP Web IDE right click on the ovpdemo Project, click on New–>Extension

Select the Overview Page Extension and click Next

Select the Custom Card, and enter the name of folder and controller, in this case Task

Note the comment that the Task.fragment.xml and Task.controller.js files will be generated after finalising the wizard steps. This is how the project structure within ext will look like.

Let us now look into the details of the fragment, controller and component files.

The fragment already provides you with a skeleton to add your ui components. As we plan to have a task card it would contain a list of existing tasks and a provision to add more. So the fragment would look like the following sample:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:ovp="sap.ovp.ui"
	xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1">
	<Toolbar>
        <Title text="{ovpCardProperties>/title}" class="sapUiSmallMarginBegin"/>
        <ToolbarSpacer/>
        <Button icon="sap-icon://add" press="onAddTask"/>
    </Toolbar>
    <VBox id="tasks"/>
</core:FragmentDefinition>

The controller too provides the lifecycle methods added and looks as follows to begin with:

(function () {
	"use strict";

	/* controller for custom card  */

	sap.ui.controller("zzz.ovpdemodw.ext.Task.Task", {

		onInit: function () {

		},

		onAfterRendering: function () {

		},

		onExit: function () {

		}

	});
})();

We will add code further to the onAfterRendering

		onAfterRendering: function () {
			var oView = this.getView(),
				oCardPropertiesModel = oView.getModel("ovpCardProperties"),
				aTasks = oCardPropertiesModel.getProperty("/tasks"),
				i,
				oTasksFlexBox = oView.byId("tasks");
			oTasksFlexBox.removeAllItems();
			for (i = 0; i < aTasks.length; i++) {
				oTasksFlexBox.addItem(new sap.m.HBox({
					items: [
						new sap.m.CheckBox({
							text: aTasks[i].text,
							selected: aTasks[i].selected,
							enabled: aTasks[i].enabled,
							select: this.onItemSelected.bind(this)
						})
					]
				}));
			}
		}

We will now add 2 more functions to add tasks and to mark them as done.

//on selection of items in the list the task will be marked as done		
onItemSelected: function (oEvent) {
  var oSource = oEvent.getSource();
  oSource.setEnabled(false);

  var oView = this.getView(),
  oTasksFlexBox = oView.byId("tasks"),
  oCardPropertiesModel = oView.getModel("ovpCardProperties"),
  aTasks = oCardPropertiesModel.getProperty("/tasks");
  var iIndex = oTasksFlexBox.indexOfItem(oSource.getParent());
  aTasks[iIndex].enabled = false;
  aTasks[iIndex].selected = true;

  oCardPropertiesModel.setProperty("/tasks", aTasks);
  oCardPropertiesModel.refresh(true);
    },

onAddTask: function (oEvent) {
  var oSaveButton = new sap.m.Button({
    text: "Save",
    type: "Emphasized"
    });
  // settings dialog close button
  var oCancelButton = new sap.m.Button({
    text: "Cancel"
  });
  var oDialog = new sap.m.Dialog({
    title: "Create a Task",
    modal: true,
    contentWidth: "1em",
    buttons: [oSaveButton, oCancelButton],
    content: [
      new sap.m.Label({
      text: "Task Name"
      }),
      new sap.m.Input({
      maxLength: 100
      })
    ]
  }).addStyleClass("sapUiContentPadding");
    oCancelButton.attachPress(function () {
    oDialog.close();
  });

  oSaveButton.attachPress(function () {
    var oView = this.getView(),
    oCardPropertiesModel = oView.getModel("ovpCardProperties"),
    aTasks = oCardPropertiesModel.getProperty("/tasks");

    aTasks.push({
      "text": oDialog.getContent()[1].getValue(),
      "enabled": true,
      "selected": false
    });

    oCardPropertiesModel.setProperty("/tasks", aTasks);
    oCardPropertiesModel.refresh(true);
				   
    this.getOwnerComponent().getComponentData().mainComponent.getLayout().rerender();
    oDialog.close();
  }.bind(this));

  oDialog.open();
}

You will also notice that the wizard has added the custom card to your manifest settings. PS: You will have to adjust the text for card03_title in the i18n.properties file.

"card03": {
	"template": "zzz.ovpdemodw.ext.Task",
	"settings": {
	"title": "{{card03_title}}"
	}
}

You will notice that in the controller code you expect the tasks to be part of the card properties, you will have to modify the manifest entry for the new card as follows to get the custom card working:

"card03": {
	"template": "zzz.ovpdemodw.ext.Task",
	"settings": {
	"title": "{{card03_title}}",
	"tasks": []
	}
}

With that you are all set to see your custom card working. Run the project using the testOVPwithMock.html and here is what your Task card would look like. Click on the + to add new Tasks. Note that the sample only considers these tasks for the given session, to save it you will have to do further implementation.