Updating the template

You are now going to update the product entry screen template.

You can either directly open the UI view ProductUI from Neos Studio, or from the application. Indeed, when you are on the product list screen, you can open the associated UI view by using the shortcut Ctrl + Shift + E. There is a property that defines the screen template. By default, it lists the properties.

First, you're going to take the toolbar out of the first panel and put it on top of the card. Next, you will put the unit and discontinued price side by side. Finally, you'll set a minimum size of 300 on the unit price.

For more information about the UI template, you can read this article.

You should end up with a template similar to this :

<vertical-layout layout:height="fill">
    <heading level="1" layout:padding="small">
        @Title
    </heading>
    <card layout:height="fill">
        <toolbar refresh="true" />
        <splitter layout:height="fill">
            <splitter-panel size="60">
                <vertical-layout layout:height="fill" layout:padding="small">
                    <datagrid layout:height="fill" />
                    <pagination-bar />
                </vertical-layout>
            </splitter-panel>
            <splitter-panel>
                <vertical-layout layout:height="fill" layout:padding="small">
                    <form-field property-name="ProductID" />
                    <form-field property-name="ProductName" />
                    <horizontal-layout>
                        <form-field property-name="UnitPrice" layout:min-width="300" />
                        <form-field property-name="Discontinued" />
                    </horizontal-layout>
                </vertical-layout>
            </splitter-panel>
        </splitter>
    </card>
</vertical-layout>