Modeling Guide for SAP Data Hub

Using the Scene Editor (Beta)

The scene editor in the SAP Data Hub Modeler helps users including non-developers to create UIs for graphs. It provides a canvas where you can design the interface and other graphical capabilities.

Actions Description
Open the scene editor The scene editor is available within the SAP Data Hub Modeler application,
  1. Start the SAP Data Hub Modeler.
  2. In the navigation pane, choose the Graphs tab.
  3. Select and open the required graph for which you want to create the UI in a graph editor.
  4. In the editor toolbar, choose (Scenes) and select the Create Scene menu option.

    If you have already created a scene, then you can select the required scene from the menu option to open it in the scene editor.

  5. In the Create Scene dialog box, provide a name and description for the scene, and select the scene type (2D or 3D).
  6. Choose OK.

Result: The scene editor opens in a new tab in the Modeler with an empty canvas.

Create a user interface You can drag and drop UI elements (controls) to the empty canvas and design a UI for the selected graph.
  1. In the navigation pane, choose the Controls tab.
  2. Drag and Drop the required controls from the Controls tab to the canvas and design the interface.
Create and manage camera positions Camera positions allow you to save specific moments of the camera in a 3D environment. You can use these saved positions to animate between them and reposition the 3D environment to very specific places.
To add a new camera position:
  1. In the canvas, click on a Three.js Container control to open its Configuration pane.
  2. Under the Bindable Properties section, turn Editing on.
  3. Scroll down on the Configuration pane until you see Camera Positions.
  4. Click the + icon. The tool will save the values of the current camera in your Three.js Container.
  5. Save your scene
To rename a Camera Position:
  1. In the canvas, click on a Three.js Container control to open its Configuration pane.
  2. Under the Bindable Properties section, turn Editing on.
  3. Scroll down on the Configuration pane until you see Camera Positions.
  4. Click the name of an existing Camera Position
  5. Type the new name of the position and press Enter or click elsewhere
  6. Save your scene
To delete a Camera Position:
  1. In the canvas, click on a Three.js Container control to open its Configuration pane.
  2. Under the Bindable Properties section, turn Editing on.
  3. Scroll down on the Configuration pane until you see Camera Positions.
  4. Click the trashcan icon next to an existing Camera Position
  5. Save your scene
Provide values to configuration properties The controls, like the graphs and operators, are associated with various configuration properties.
  1. In the canvas, click the required control to open its Configuration pane.

    The tool displays the predefined configuration properties available for the control.

  2. Provide values to the properties.
Create bindings Bindings help link the control property with the State of the Scene Creator operator. In the Configuration pane, under the Bindable Properties section, the application displays all properties that you can bind with the State.
  1. To create a bind for a property, choose .
  2. If you want to tool to bind the properties automatically with the State, choose (Auto bind). Follow the note below for an example configuration.
  3. If you want to edit the property type or definition, choose (Edit custom properties).

    This operation opens the Type editor, where you can edit the custom property. You can also create new properties and provide values.

    For Binding, the name is not relevant.

Manage Scene Assets and Scripts In the Configuration pane, choose the Resources tab to manage scene assets and scripts.

Assets are elements that you can upload and use in the scene, including imported scripts, images, videos, 3D models, CSS sheets, JSON files, or any other document relevant to your scenario. The scripts are JavaScript files that will run when the scene runs.

Assets that you upload are available for the entire scene, so adding an asset to a scene makes it available for every control. However, you can also add assets for a specific control by using the control editor, and it will be available in a scene every time that control is used there.

The scope of scripts is restricted to each control so that the application can execute them contextually.

View Scene Outline In the Configuration pane, choose the Navigation tab to view a tree hierarchy representation of all controls in the scene. This representation also provides information on the relationships between the controls in the scene (parent, child, or sibling).
In the Navigation tab, you can also navigate to the control and edit its definition by clicking the required control in the tree hierarchy. Additionally, if you have saved the changes, you can export the scene and as an application in the Launchpad.
  1. Choose Export Scene.
  2. Provide a display name that the application must use for the scence in the Launchpad.
  3. If you want to view the JSON definition for the scene, choose Get JSON.
  4. Select whether you want to export it is to the tenant workspace or to the user workspace.
  5. Choose Export to Launchpad.
Save Changes To save the user interface that you have designed, in the scene editor toolbar, choose (Save).
Preview the UI After designing the UI, you can preview the interface.
  1. In the editor toolbar, choose .

    This operation does not start the graph. It only opens the preview editor that provides a static preview of the user interface.

  2. To stop the preview, choose .
Preview interface using the Viewer Viewer helps preview your UI receiving and sending data in real time when designing the scene. Opening viewer starts the graph if it is not already running.
  1. If you want to preview the interface on top of the running scene, choose .
  2. In the scene editor toolbar, choose to open the standalone viewer in a new page with only your interface.