Creating reusable views

To contain functions or user interface elements that another view or page can use, create a view.

You can create a view when creating your business application in the low-code designer. The new view can be in a toolkit or in a application. To reuse the view in multiple applications, consider creating the view in a toolkit, which makes the view available to all applications that use that toolkit. However, keep in mind that if someone edits the view, the changes apply to all instances of that view. Fixes can be picked up by all users of the view, but changes can also have unintended consequences in other applications. To limit your changes to a particular application, consider creating the view in that application.

If you are creating a reusable view for a less technical user, like an assembler, make the view simple to configure. By considering the intended purpose and audience of your reusable view, you can create views that improve your user's experience.

Creating a view can be an iterative process in which you do steps 3 - 6 in any order. You might start by following the instructions in the order that is listed in the procedure. Based on the results of your preview, update the appropriate pages and preview again. Continue the iterative process of updating and previewing until you are satisfied with the look and behavior of your view.
Tip: Alternatively, you can create a view directly from an existing business object. Click Data > Business Object, then click the twistie next to the business object name, and then click Create View. Complete the wizard to create the view, whose business data is bound to the business object it originated from.

The UI Toolkit is provided by default. This toolkit provides sets of views that include standard user interface elements, such as text fields, and images. You can use these views to develop more complex views. For detailed information about developing views, see the following subtopics.

  1. Click the plus sign next to User Interface and select View from the list of components.
  2. Specify the name of the new view. Unless you are basing the new view on a template, start with a blank view.
    Restriction: The name of the view must be a valid JavaScript ID with the following exceptions: it can have spaces and it cannot have underscores. That is, you can use names like My View or MyView, but you cannot use names like My_View or default; default is a reserved word in JavaScript. For information about JavaScript IDs, see Annotated ECMAScript 5.1 External link opens a new window or tab.
    After you click Finish, the editor opens the new view.
  3. Under Overview, provide information about the view.
  4. Switch to Behavior and define the behavior for the view.
  5. Switch to Variables and define the variables that the view uses.
  6. Switch to Layout and define what the view displays to users.
  7. To apply a custom styling to the view instances displayed by your view, consider using a dynamic style with your view so that it adheres to the Theme set on the application. See Defining view behavior.
  8. Review the look of the view and how it functions. Based on the review, repeat steps 3 - 7 to make the appropriate adjustments to the view or the items it contains or refers to. Keep iterating through reviews and updates until you have the results that you want.
  9. Preview your view.
    1. Add your view to a page.
    2. Wire the page in the application project diagram.
    3. Bind the variables that the view uses to appropriate data.
    4. Review the configuration for the view and update it if necessary.
    5. Click Preview in the upper-right pane.