Modeling Guide for SAP Data Hub

Developing Controls

Developing Controls is nothing different from normal front-end development with a modern framework.

It has its limitations, but we are always improving the experience and adding new features. Our goal is to have, in the future, a tool that exempts having to understand how to develop a control, and we hope each iteration of our tool will be more robust and complete than the previous.

Templates

Every Control has an HTML snippet that serves as basis for how the interface element will behave on the screen. This snippet is called a Template, and it can not only contain standard HTML. Advanced templating techniques are available through the template engine.

The current engine for Scene is a framework called Aurelia, which provides functions that enable Scene to interpret the templates and works under changes in the element during design time.

To learn more about Aurelia templates, you can read the official documentation at https://aurelia.io/docs/templating/Information published on non-SAP site.

Scripts

Scripts define settings of a control, from how it initializes to how it handles data updates that come from the bindings. Scripts are written in JavaScript, following the ES5 syntax for compatibility with Internet Explorer 11.

For more information about how scripts work and which function hooks are available, go to Understanding Scripts.

Custom Properties

When you first create a Control, it will only have Visible as a default property, allowing you to hide or show the Control with a switch. That is also available in its State, which enables you to change it dynamically using bindings.

If you want to further add properties to your control and its state:
  1. Go to the Bindable Properties collapsible;
  2. Press the Edit button on the right;
  3. Reach the Type Editor;
  4. Click the + button
    1. There, you can choose a name, a title, a type and a Scene UI Control. This property allows you to choose how the property will be represented in the Configuration Panel. For example, if the type of your new property is string, but rather than a free text field you want that to be the URL to an asset, you can pick the Asset Chooser, and you will see a helper in the Configuration Panel to choose an asset from.
  5. Save your new type and the new properties should be reflected in the Configuration Panel

This customization is available when creating a Control and after adding one to a Scene, which means you can create default properties for a Control and extend them once they are part of a Scene.

CSS

You can use the style attribute on the HTML template, a <style> tag, or you can define your own CSS file with the rules needed and import it as an asset for the control and load it in the init() of the element.

3D Controls

For 3D Controls or Scenes, we support three.js, which is one of the standard libraries for using WebGL in modern browsers.

You can read more about three.js at https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-sceneInformation published on non-SAP site.