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,
Start the SAP Data Hub Modeler.
In the navigation pane, choose the
Graphs tab.
Select and open the required graph for which you want to
create the UI in a graph editor.
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.
In the Create Scene dialog box,
provide a name and description for the scene, and select the
scene type (2D or 3D).
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.
In the navigation pane, choose the
Controls tab.
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:
In the canvas, click on a Three.js
Container control to open its
Configuration pane.
Under the Bindable Properties
section, turn Editing on.
Scroll down on the Configuration
pane until you see Camera
Positions.
Click the + icon. The tool will
save the values of the current camera in your
Three.js Container.
Save your scene
To rename a Camera Position:
In the canvas, click on a Three.js
Container control to open its
Configuration pane.
Under the Bindable Properties
section, turn Editing on.
Scroll down on the Configuration
pane until you see Camera
Positions.
Click the name of an existing Camera
Position
Type the new name of the position and press
Enter or click elsewhere
Save your scene
To delete a Camera Position:
In the canvas, click on a Three.js
Container control to open its
Configuration pane.
Under the Bindable Properties
section, turn Editing on.
Scroll down on the Configuration
pane until you see Camera
Positions.
Click the trashcan icon next to
an existing Camera Position
Save your scene
Provide values to configuration properties
The controls, like the graphs and operators, are associated with
various configuration properties.
In the canvas, click the required control to open its
Configuration pane.
The tool
displays the predefined configuration properties
available for the control.
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.
To create a bind for a property, choose .
If you want to tool to bind the properties automatically with the State, choose (Auto
bind). Follow the note below for an example
configuration.
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.
Choose Export Scene.
Provide a display name that the application must use for
the scence in the Launchpad.
If you want to view the JSON definition for the scene, choose Get
JSON.
Select whether you want to export it is to the tenant
workspace or to the user workspace.
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.
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.
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.
If you want to preview the interface on top of the running
scene, choose .
In the scene editor toolbar, choose to open
the standalone viewer in a new page with only your
interface.