In this blog, I will mention how to extend a view and how to
use extension points in views. Follow my previous blogs on extending sapui5
apps.
SAPUI5 uses extension points for extending standard
views with custom content. The assignment of a custom view to an extension
point is done in component customizing. Extension points are inserted in a
standard view to indicate the position within the view where you can insert
custom content. In XML views, the <ExtensionPoint>
tag is used and replaced by the controls provided by the customer. The tag
should, therefore, be placed in the view where also a control would be placed
and document the types of controls that are suitable.
In the XML view below, for example,
three extension points are defined: extension1,
extension2, and extension3.
The extension name together with the View name identifies an extension point.
<mvc:View
xmlns="sap.ui.commons"
xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
<core:ExtensionPoint
name="extension1" />
<TextView
text="SAP View 'Sub2' - this one is extended by the customer and there
should be a button after this text"></TextView>
<core:ExtensionPoint
name="extension2" />
<core:ExtensionPoint
name="extension3" />
</mvc:View>
In JS Views,
extension points can be created within the createContent method by using the sap.ui.extensionpoint function. The following example
shows the simplest way to initiate an extension point in a JS view.
[...]
createContent(oController){
return
sap.ui.extensionpoint(this, "extension4");
}
[...]
You can add
an extension point to an aggregation of another control by specifying the
target control and, optionally, a target aggregation. The target aggregation is
only required when you do not want to add the extension point to your target
control's default aggregation. In the following example, an extension point is
added to VerticalLayout:
[...]
createContent(oController){
var oLayout = new
sap.ui.layout.VerticalLayout("Layout1");
sap.ui.extensionpoint(this, "extension4", null, oLayout, "content" /*not
mandatory, as content is the default aggregation*/);
}
[...]
Extension
Points with Default Content
Applications can also use extension
points to provide default content, which is used as long as no custom content
is defined and ignored when custom content is defined. This feature is
particularly interesting for aggregations which are filled by data binding: In
XML views one item is given which is used as a template. In applications that
enable the exchange of these items by custom ListItems,
the default list items can be enclosed in an <ExtensionPoint>
tag.
<mvc:View
xmlns="sap.ui.commons"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<ListBox
items="{/names}">
<core:ExtensionPoint
name="extension1" />
<ListItem
text="{firstName} />
</core:ExtensionPoint>
</ListBox>
</mvc:View>
This can be used for all multiple
aggregations, not only for lists.
To define default content for extension
points in JS views or fragments, specify the value of another parameter:
sap.ui.extensionpoint(this,
"extension4", fnCreateDefaultContent); // this extension point has a
callback function creating default content
The function provided as a callback
needs to return a control or an array of controls and is only executed when no
customizing for the extension is configured, or when customizing is disabled.
Extension
Point Definition
The extension content, which will then be
inserted at the position of an extension point, is defined in the custom
application. For example: For the extension points that have been defined in
the standard application described in the section above, custom content can be
defined for each extension. This is shown in the example below together with a
description of the customizing that connects the extension point in the
delivered standard application and the extension content in the customer
application.
customizing:
{
"sap.ui.viewExtensions":
{
"samples.components.ext.sap.Sub2":
{
"extension2":
{
className:
"sap.ui.core.Fragment",
fragmentName:
"samples.components.ext.customer.CustomFrag1",
type:
"XML"
},
"extension3":
{
className:
"sap.ui.core.mvc.View",
viewName:
"samples.components.ext.customer.CustomSubSubView1",
type:
"XML"
}
}
Extension
content in the custom application in CustomFrag1.fragment.xml
file:
<Button
xmlns="sap.ui.commons" text="This Button is in an Extension
Fragment" />
Extension content in the custom
application in CustomSubSubView1.view.xml
file.
<mvc:View
xmlns="sap.ui.commons"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<core:ExtensionPoint
name="extension1" />
<TextView
text="Customer View 'SubSubView1' - this one extends the original SAP View
'Sub2' - and even custom Views can be extended:"></TextView>
<core:ExtensionPoint
name="extension2" />
</mvc:View>
So this tutorial was about view extension, in my next
tutorial blog, you will learn about view modification and Replacement.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
1 comments:
Click here for commentscan you please tell me what is samples.components.ext
ConversionConversion EmoticonEmoticon