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.