Add an XML fragment for a tab in your app

Open the SAP Web IDE, and navigate in the te2016 > webapp > view folder.

Double-click on Detail.view.xml to open it in the editor.

Insert the code below into the ObjectHeader element.

This XML snippet below adds four fields from the OData service (City, Country, URL and Partner role), as well as a reference to a title that you will insert in the next step.

Note that the code generated by the template has a closing angle bracket on line 19. That angle bracket belongs with the line above. Insert the code below as shown and you can clean up the angle bracket as well. Save your changes.

Code to insert:

<ObjectAttribute title="{i18n>headerCity}" text="{Address/City}"/>
<ObjectAttribute title="{i18n>headerCountry}" text="{Address/CountryText}"/>
<ObjectAttribute title="{i18n>headerURL}" text="{WebAddress}"/>
<ObjectAttribute title="{i18n>headerBusinessPartnerRole}" text="{BusinessPartnerRoleText}"/>

Your XML file should look like this:

The title attributes in the snippet you inserted tell the app to look for the label of the data field in a centralized file.

To add those labels, open the te2016 > webapp > i18n folder and double-click the i18n.properties file.

Insert the text below at the end of the i18n.properties file just below the Detail View separator line and save your edits.

headerCity=City
headerCountry=Country
headerURL=URL
headerBusinessPartnerRole=Relationship
itf1Title=Contacts
itf2Title=Map
mapFragmentTitle=Map

The actual location in the file doesn’t matter, but it is nice to keep things organized so you can find them easily in the future.

You will notice three additional labels that you’ve added. You will use them later in the tutorial.

With both files saved, click the Run button again to launch your app.

You should now see the four additional fields at the top of the detail view.

Before you make some additional changes to the Detail.view.xml file, you will create a XML Fragment file that you will link to the detail view.

A Fragment is a light-weight UI components that do not have a dedicated controller.

Fragments are typically used in pop up screens (Dialog, Message boxes etc), and you will use one to control the data shown on the second tab of your app.

Add a new file to your project by right-clicking on your view folder and select New > File.

Name the file Map.fragment.xml (the case is important) and click OK.

Paste the XML below into the new Map.fragment.xml file and save your edits.

    <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns="sap.m">
	    <l:Grid defaultSpan="L12 M12 S12" id="contactFragment" width="auto">
		    <l:content>
			    <f:SimpleForm columnsL="6" columnsM="1" editable="false"
				layout="ResponsiveGridLayout" maxContainerCols="6" minWidth="1024" title="{i18n>mapFragmentTitle}">
				    <f:content>
					    <Label text="Address "/>
					    <Text text="{Address/Building}"/>
					    <Text text="{Address/Street}"/>
					    <Text text="{Address/City}"/>
					    <Text text="{Address/PostalCode}"/>
					    <Text text="{Address/CountryText}"/>
				    </f:content>
			    </f:SimpleForm>
		    </l:content>
	    </l:Grid>
    </core:FragmentDefinition>

Your file should look like this:

Return to Detail.view.xml.

You will make a few simple edits to the file, before you do some bigger restructuring.

At the top of the file, in the mvc:View element, insert an additional XML namespace attribute (this namespace will be used when the Fragment is loaded):

xmlns:core="sap.ui.core"

The top of your file should look like this:

Scroll down to the IconTabFilter elements.

Update both IconTabFilter sections as shown the image below.

You will need to:
- change both icon attributes as shown in the image
- and insert the two text attributes provided below. These link the label for the tabs to lines you previously inserted into i18n.properties.

For the first IconTabFilter element:

text="{i18n>itf1Title}"

For the second IconTabFilter element:

text="{i18n>itf2Title}"

The next step is to set the content to be displayed in the first tab.

Place your cursor at the end of line 35 (the tooltip line of the first IconTabFilter) and type in <content> (don’t copy and paste this one time).

You will notice that as soon as you type the closing angle bracket, the SAP Web IDE automatically inserts the </content> closing tag for you.

Add some line feeds between the <content> tags so your file looks like this:

This step will start the restructuring of the detail view where you will move the entire <Table> element from its current location and place it within the <content> element you just inserted.

Locate the entire <Table> element as shown below, cut the text (using CTRL+X).

Paste the text you just cut within the <content> element you added above and save your changes.

The field displayed below the contact’s full name is the ContactKey which is not useful to a user.

Change that field to show the gender of the contact by replacing {ContactKey} with {GenderText}, save your change and run your app.

The detail view will now look like this:

The last part of the restructuring is to add in a <content> element for the second tab (the second <IconTabFilter> in the file) to load the Fragment file you created.

Insert the XML snippet shown below before the closing tag of the second <IconTabFilter> as shown in the image below.

<content>
    <core:Fragment fragmentName="com.test.teched.view.Map" type="XML" />
</content>

The section of the Detail.view.xml file for your second <IconTabFilter> should look like this:

The last change before running your app is to modify the manifest.json file located in te2016 > webapp.

Insert the two lines below as shown in the image. If the file is opened in the Descriptor Editor mode, click the Code Editor tab at the bottom of the window to change the mode.

"ach": "ach",
"resources": "resources.json",

Save your edits and run your app. The two tabs in the detail view should look like the images below.

Contact tab:

Map tab: