Views

Creating Views

Now that we have a data model we should create a set of Views that can be used to list, display, create, edit, and manage the instance of type Superhero.

Listing View

On project tab View, click Add View. Select as view type, Fragment and view category Entity List. Select entity Superhero. Leave the other settings with default values.

Once the view is generate you should see the dashboard of the View the generated widget tree as shown below.

You can preview the View in tab Preview. Notice that data in the dummy dataset is being used for provide the data for the listing.

We also want that the project View have a user-friendly and consistent layout, so we will create a page with a layout that include the Entity List Panel. On project tab View, click Add View, and select as view type, Page. Select one of the provide layout — e.g. a two-column layout. Select the previous created fragment Entity List Panel as imported sub-view. This is shown in screenshot below.

Once the page view is created, preview it. Confirm that the page has the selected layout, and import the listing panel showing the details of the dummy Superheros.

You many not fully be happy about the ordering of the fields as they show in the table. Fortunately, the App Studio View editor makes it very easy to customize the generate views, or even create completely new View from scratch, using drag&drop and widget configuration panel. Try drag&drop the TH and TD columns widget, so that the columns are shown in the following order: img, name, squad, vilian, and friends. Use preview as much as need to help you guide trough the process.

You many also want to change the look&fell of the page. Click on the widget created and edit some style properties in the widget property editor panel on the right side. Experiment with color, background, fonts, borders, margin and padding, etc.

Details View

We can repeat similar steps as above for the Supehero details view. On project tab View, click Add View. Select view type Fragment and view category Entity Details Panel. Select entity Superhero. Leave the other settings with default values. Preview the generate view. Use drag& drop to move the Image to top of the panel, and the widgets for the description and friends to the bottom.

Next, create another view of type Page. Select same layout as before. Select the previous created fragment Entity Details Panel as imported content sub-view.

Editor View

Finally, let create a editor panel to create new instances or edit existing instance of Superheros. On project tab View, click Add View. Select view type Fragment and view category Entity Editor Panel. Select entity Superhero. Leave the other settings with default values. Preview the generate view. Use drag& drop to MediaUpload* widget to the top of the panel, and the widgets for the description and friends to the bottom.

Next, create another view of type Page. Select same layout as before. Select the previous created fragment Entity Editor Panel as imported content sub-view.