Skip to Content
Technical Articles
Author's profile photo Prasita Prabhakaran

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.

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabheet Madan
      Nabheet Madan

      Great stuff thanks for sharing! SAP Web Ide is becoming a super power house for all developments. Lets see if we can get ABAP also to it.

      Author's profile photo Akash Nachnani
      Akash Nachnani

      Hi Prasita Prabhakaran,

      I have developed an ovp app and have added 2 custom cards.

      But global filter is not working in 2 custom cards.

      Could you please let me know, how can we apply global filter in custom cards?

      Thanks a lot.

      Author's profile photo Hemil Prajapati
      Hemil Prajapati

      Hi Prasita Prabhakaran,

      Great stuff, You are doing nice job.

      I have one question. Can we create chart into the custom card and in heading part I want to show some details which is not possible in standard one.

      The problem is into heading part I want to show details like below image.

      Thank you.