Skip to Content
Technical Articles
Author's profile photo Ashish Anand

Customising an Analytical List Page (ALP) application with Visual Editor

Visual Editor is SAP Web IDE based WYSWYG editor which is used to modify or extend your Fiori Elements based application at the design time. In this blog, I’ll demonstrate how we can use Visual Editor to customise our ALP application which we created in previous blogs of this blog series.

Prerequisites

  1. Make sure you have been to the previous blog of this blog series and you have rest of the sample ALP application to implement these extension points.
  2. For reference, you can clone the GIT repo for this sample application which we are building.

How to open your Fiori Element based application with Visual Editor

To open Fiori Elements based application with Visual Editor you need to right-click on your project in Web IDE and choose “Visual Editor” from the context menu.

This will open your application in Visual Editor in Preview mode where the application developer sees the application in different modes i.e. Desktop, tablet and mobile. To enter in Edit mode you need to click on Edit button

This will open your application in Edit mode where application developer can now edit some of the properties of your application controls. Here the application sees the screen divided into three vertical sections i.e. outline where all the controls are listed in hierarchical style, a canvas where the application screen is available and the property pane where application developer can change properties of the controls.

Whenever application developer changes something inside the visual editor, a corresponding .change file is generated under path web app –> Changes which contains all the changes. done by the application developer.

Enabling the Clear button in the filter area

To enable the clear button I selected the “clear” control from the outline and changed the visible property to true. I have already discussed how to enable this button for custom filter fields in my previous blog.

The above operation generated the below .change file

{
	"fileName": "id_1566718261132_330_propertyChange",
	"fileType": "change",
	"changeType": "propertyChange",
	"moduleName": "",
	"reference": "demo.alp.ALPDemo.Component",
	"packageName": "$TMP",
	"content": {
		"property": "visible",
		"newValue": true
	},
	"selector": {
		"id": "demo.alp.ALPDemo::sap.suite.ui.generic.template.AnalyticalListPage.view.AnalyticalListPage::SEPMRA_C_PD_ProductSalesData--template::SmartFilterBar-btnClear",
		"type": "sap.m.Button",
		"idIsLocal": false
	},
	"layer": "CUSTOMER_BASE",
	"texts": {},
	"namespace": "apps/demo.alp.ALPDemo/changes/",
	"projectId": "demo.alp.ALPDemo",
	"creation": "2019-08-25T07:32:03.064Z",
	"originalLanguage": "EN",
	"conditions": {},
	"context": "",
	"support": {
		"generator": "Change.createInitialFileContent",
		"service": "",
		"user": "",
		"sapui5Version": "1.68.1",
		"sourceChangeFileName": "",
		"compositeCommand": ""
	},
	"oDataInformation": {},
	"dependentSelector": {},
	"validAppVersions": {
		"creation": "1.0.0",
		"from": "1.0.0",
		"to": "1.0.0"
	},
	"jsOnly": false,
	"variantReference": ""
}

Few properties of this .change file which worth mentioning are:

  1. content: which contains what is changed in this case its visibility which we have made to true.
  2. Selector: which contains to which control this change needs to be applied. in this case, it’s the clear button.
  3. Layer: to which layer these changes need to apply.

Enabling the download button for the smart chart

To enable the download button I selected the “Download Chart” control from the outline and changed the visible property to true.

Similarly, other toolbar button properties of the table and smart chart can be changed via visual Editor very easily.

Disabling a column of the table

I wanted to hide the first ID column of our table as it’s just displaying a GUID. To do this I selected the first table column of the table from the outline and made the visibility to false.

 

Important !!

After making all three above changes the application now looks like:

Now I have shown doing one change to each ALP application area i.e. filter, chart and table. Similarly, the full list of supported changes can be found here.  You should only do the changes which are listed here otherwise it might lead to breaking the application at run time, you never know.

Conclusion

In this last blog of my ALP blogseries, How we learnt what is Visual Editor and how we can use to make changes to an ALP application. However, this procedure remains the same for any FE application. Only things taht changes per application types is the list of supported controls and properties.

What Next?

This brings us to end of this blog series and hopes you people have found it helpful. Please let me know about any feedbacks which you have, any questions or anything in the comment section.

In case you want to deploy the ALP application which we build during this blog series, you might find this blog useful.

Assigned Tags

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

      Hi Ashish,

      Great blog.

      I'm currently building Fiori Element applications using the Personal WebIDE. Yes, old tool...

      Do you know what actually happens behind the scenes technically with visual editor? e.g. Does it change the metadata file or add new files for the change to happen? Perhaps the change file is functional? ie. if I copy your change file and edit it, will i be able to enable the download button for example?

      I was wondering if I can achieve the same by hand and run this in an on prem env. Just a thought.

       

      Cheers

      Michael

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hello Michael,

      Good question !! let me try and explain. a .change file contains information like control ID (the ID should be stable), then property and then the value for the property. let's assume the below example of a minimalistic .change file:

      {

      id: "smartTableExampleId",

      useExportToExcel: true

      }

      once you deploy your visual editor change to the application server. these .change file get created as change entries. These changes are then fetched when the end-user access the application at the runtime. on receiving on the above change entry, on a high level, the framework does something like this:

      sap.ui.getCore().byId("smartTableExampleId").setUseExportToExcel(true);

      I hope this high-level explanation helps 🙂

      Thanks and Regards

      Ashish

      Author's profile photo Donato Ferraro
      Donato Ferraro

      Hi Ashish,

       

      great blog! I'm actually building a new ALP project. I'm using the Visual editor of my sap webide Full-stack, but not works good.

      I trying to show excel button on table toolbar and change the width property of table columns. The changes in editor mode and preview are correctly shown, but when I run code they not are shown.

      Do you think this is a webide problem or other things?

      Thanks and Regards
      Donato