038: Recycling-Heroes - Annotations (Document)

Introduction

In the last episode, we finished our application and added the second entity. Now we'll complete the current application by adding the UI annotations and getting the application running.

UI Annotations

Let's switch to the Metadata Extension and correct the UI annotations accordingly. Currently, too many UI annotations have been generated. We'll replace these first. To do this, we select all UI annotations and start the Metadata Wizard, an IDE action in our environment. By default, the wizard suggests certain things, such as a facet for general data, to which all fields are assigned. In the lower section, we find a second facet that defines the corresponding linked tags. However, we don't need these in this case and remove them completely. Next, we add a new facet containing the document. This facet receives a corresponding ID and a label, which is displayed in the upper section. The position determines the order in which the facets are displayed. Finally, we assign a qualifier to allow for later assignment. As a third facet, we create the administrative fields. These also receive a label, a position, and a qualifier to allow for later reference. Next, we can hide certain fields in the UI. For this, we use the "Hide" action. In the IDE action, we remove the fields from the interface. These fields are auxiliary fields that we don't need to be visible in the document. In the next step, we adjust the fields and give them new qualifiers, as we want to assign them to the new facet. We assign the corresponding administrative fields in the lower section to the new facet for the admin fields. After we have adjusted all the fields, we define in the next step which fields are relevant for the selection. We also adjust other fields that we don't want to see as line items in the list, but do want to see on the object page. Once we have finished with the adjustments, we can apply the fields. All new UI annotations will now be inserted. Beforehand, we receive a preview, which we can simply confirm. In the next step, we adjust the header information and change the description to a new field. Once we are satisfied with the changes, we can activate the Metadata Extension with the new UI annotations, and that's it for now.

Document Annotations

Now that we have added the UI annotations, we want to activate the upload field in the app for the documents we plan to upload later. To do this, we switch to the Core Data Service and add the corresponding annotations to the fields. First, we add the semantics to the MimeType field. Next, we define the document field itself as a Large Object. There, we use the Semantics annotation to provide all the information the stream type needs, such as the MimeType and the actual filename, which we find in the lower part. In the view header, we also define a new semantic key, in this case, the document ID. This will later allow us to access the document using a business key without having to use, for example, the draft key. We also define a corresponding text element for the document ID. This refers to the title of the current document. This ensures that the technical ID is not displayed later, but rather the descriptive text. In the final step, we hide the technical ID and display the actual text instead, completely replacing the generic ID in the UI.

Search

Now that we have activated the document in the app, we also activate the search function. To do this, we first need to activate the general search function in the header area of the CDS view. In the next step, we define the fields we can search, for example, the title or the description of the document. For these two document fields, we also activate fuzzy search so that we get relevant results even if texts contain typos or only partially match the search. Finally, we activate the Core Data Service so that all changes take effect.

Key

Now let's go to our application and update the UI. As a first step, we try to create a new record, but notice that we are asked for a key. If we enter a test key there, we receive an error message stating that it does not correspond to a UUID. In this case, we actually expect the key to be automatically assigned by the framework and not for us to be asked for its content. Key assignment should be done in the definition of the business object. Therefore, we navigate to the Behavior Definition and adjust the Document ID field by adding "numbering: managed". The framework now handles automatic number assignment when we create a new record. However, it's possible that despite the automatic number assignment, we might still have an input field for this key object. In this case, we forgot to set the attribute to readonly. Therefore, let's go back to the behavior definition and update the attribute. After reloading the application, the field is now write-protected and will be populated automatically.

Test

Let's test our application in the first step and create a new record. Now we are no longer prompted for the ID and can define initial attributes such as the document type, title, and description. Once we save the record, it will also be created in the database. In the next step, we can also upload a document. In this case, we'll first upload a JSON file as a test document, which is located in our download folder. You can start the dialog using the button next to the field, then we select the file and upload the document. The document is now in the table on the database. In the next step, we switch back to the Metadata Extension and add the long text to the description. This gives us a larger text input field in the UI and means we're not limited to a single-line input field. This allows us to describe the document with a bit more content.

Summary

In today's episode, we focused on the application's UI annotations. We automatically created and assigned various facets using an IDE action. We fixed the key assignment for the UI, so that data records are created and numbers assigned automatically again. Furthermore, we defined a long text field to provide more content for the app. That brings us to the end of the episode. Thanks for watching and see you next time.

YouTube
Video