Skip to Content

Add an XML fragment for a tab in your app

By Jim Jaquet

Create an XML view fragment file to control the display of information on the tab in your app

You will learn

With your app committed to your Git repository, you can now safely make some changes to the app.


Any mistakes you make can be removed by discarding your changes using the Git pane.

In this tutorial, you will add some additional data fields to the detail view (the right side of you app), change the icons used on the tabs, and finally add an XML fragment file to contain the display of information on one of the tabs in the app.

final result
Step 1: Open the Detail view

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.

open Detail.view.xml
Step 2: Inserting fields into the `ObjectHeader`

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:

inserted snippet
Step 3: Open the i18n file

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 file.

Step 4: Inserting strings

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


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.

Step 5: Run the app with new fields in the header

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.

new fields
Step 6: Add a new file

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.

new file
Step 7: Name the new file

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

new file name
Step 8: Add the content to the `Fragment` file

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">
			    <f:SimpleForm columnsL="6" columnsM="1" editable="false"
				layout="ResponsiveGridLayout" maxContainerCols="6" minWidth="1024" title="{i18n>mapFragmentTitle}">
					    <Label text="Address "/>
					    <Text text="{Address/Building}"/>
					    <Text text="{Address/Street}"/>
					    <Text text="{Address/City}"/>
					    <Text text="{Address/PostalCode}"/>
					    <Text text="{Address/CountryText}"/>

Your file should look like this:

new fragment file
Step 9: Add a new namespace

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):


The top of your file should look like this:

new xml name space
Step 10: Update titles in the `IconTabFilter`s

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

For the first IconTabFilter element:


For the second IconTabFilter element:

icon tab filter
Step 11: Insert a `content` element for the first tab

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:

content element
Step 12: Deleting the `Table` element

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).

table element
Step 13: Re-inserting the `Table` element

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

insert here
Step 14: Changing a displayed field

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:

new fields
Step 15: Insert a `content` element for the second tab

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.

    <core:Fragment fragmentName="com.test.teched.view.Map" type="XML" />
insert second content block
Step 16: Second `IconTabFilter` appearance

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

second content block
Step 17: Opening the manifest file

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

Step 18: Editing the App Descriptor

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",
app descriptor
Step 19: Run your app

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

Contact tab:

contact tab

Map tab:

map tab

Next Steps

Updated 09/13/2017

Time to Complete

15 Min.



Back to top