Tips & Tricks

Setting Properties to Enumeration Values in XML

UI5 implements a convenient mechanism that helps you setting properties of controls or other elements to values from an enumeration in XML. However this feature could confuse you, if you don't know that it exists. To set a value from the enumeration graphomate.ui.charts.enums.LabelPositioningMode, for example, you only have to assign the preferred enumeration's key to the chart's attribute without using any prefix for the enumeration.

<charts:Chart 
	fontSize="10"
	...
	labelPositioningMode="None">
</charts:Chart>

UI5 Inspector for Google Chrome

The UI5 Inspector helps you to debug your UI5 application. It enables you to browse the controls and containers of the UI5 tree and review their properties, bindings and models. Moreover it allows you to modify control properties on the fly and see how they affect your application. The Chrome extension from SAP can be downloaded here. After installing the extension it adds an extra tab to your dev tools (f12).

Using OData Models

• When using data binding with an OData Model and the chart or table rerenders multiple times consider adjusting the batch sizes using query parameters
• When using property binding with an OData Model you should consider preloading the data using ODataModel.read

Miscellaneous

• To prevent the WebIDE from marking graphomate classes as not defined you simply can add /* global graphomate */ to your controller

• If you want to include enumerations you have to require them, e.g. add "graphomate/ui/charts/enums/DeviationType" to the requirements

• When using attributes in your XML-View which need a "graphomate.ui.enums.[...]"-value, make sure to type the first letter in upper-case, e.g. "type='Absolute' " 

• The Web IDE might not load the graphomate library properly and throws an error within the IDE "error: Variable: ESLint(no-undef) : "graphomate" is not defined.", but if you include the library correctly it should work anyways.

• Sometimes when using the sandbox or by using deployed apps on your launchpad you might face an 503 Error or "Uncaught SyntaxError: Unexpected token <", which doesn't allow to open your app properly. Try to click on the upper left icon and log out and in again. This should fix this bug.

• Sometimes you need to clear your cache so libraries can load properly (F12 → Ctrl+Shift+R)