App Extensibility: Net Sales

You can extend the Net Sales app according to your business needs for different aspects. For this purpose, the following extensibility options are available:

You can remove KPI tiles or add additional ones to the header level of a view.
You can add custom filters to a view.
You can hide existing buttons or add additional ones to the header or footer section of a view.
You can hide existing columns or add additional ones to a table.
You can hide existing measures or add additional ones to a chart.
You can add custom controls to views.
You can change the number of products to display on the Top and Bottom filter tabs.
You can change the threshold value that determines when warnings and critical entries are displayed for certain products.

Note Note

You can extend many SAP Fiori apps by implementing extension elements that are located in the app files only. For this app however, in addition to extension points and hooks provided in the app, you may also need to implement some extension elements in the app’s library. It is also important to note that even though the KPI apps share a common library, implementing an extension element in the library for use in one app, does not make the same extensibility feature available for any other app that shares the library. In that case, the extension element must be implemented again for the shared library in every subsequent app that requires it.

End of the note.

The following section provides a description of extensibility scenarios that can be achieved using UI controller hooks. For some of these, you may need to implement several hooks, or other extensibility entities in addition to hooks, to fully implement the extension feature. For example, to add a column to a table in the initial view, you need to implement one hook to extend the table and another one to fetch data to display in the new column. Additionally, some controller hooks are located in different development packages and must be implemented in those packages to fully activate the intended extensibility. Details are provided with each extensibility feature where this is the case.

UI Controller Hooks

To plug in and execute custom code, the following hooks are available in the controller code.

For more information about UI controller hooks, see Start of the navigation path help.sap.com/ssb Next navigation step Installation, Security, Configuration, and Operations Information Administrator's Guide Extensibility Extending the UI Layer UI Extensibility Workflow Checking the SAP-Enabled Extension Options UI Controller Hooks End of the navigation path .

Add or Remove KPI Tiles in Header Bar

You can add additional KPI tiles or hide existing tiles in the header bar of the Net Sales views. To fully implement this extensibility option, you must implement each of the following extensibility entities on the specified software layers according to your specific business needs:

To add additional KPI tiles to header bar

Implement all extension hooks under controller fullScreen.controller.js described in the table in this section to provide the framework in which the new KPI data is contained.
Implement the extension hook under controller main.controller.js described in the table in this section to extract data from the data source to render the new KPIs.

Note
To fully implement extensibility using this hook, you must also extend the NetSalesHdrQuery entity in OData service MCSAServices.

End of the note.

To remove existing KPI tiles from the header bar

Implement extension hook extHookOnInitAddCustomTiles under controller fullScreen.controller.js described in the table in this section to remove a KPI tile from the header bar.

Controller	Hook	Use
fullScreen.controller.js In package retail.car.netsales	extHookOnInitAddCustomTiles	Allows you to define additional KPI tiles or remove existing ones from the header bar in views when the Net Sales application is loaded
	extHookAfterRenderingUpdateCustomTiles	Updates additional KPI tiles defined in the header section when views are rendered
	extHookOnExitDestroyCustomTile	Wipes out controls for the additional KPI tiles defined in the header upon exit from the Net Sales application
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define the OData query results fields for the new KPI tiles

Add Custom Filters to a View

You can add custom filters to views in the Net Sales application.

To fully implement this extensibility option, you must implement each of the following extensibility entities on the specified software layers according to your specific business needs:

Implement any of the extension hooks under controller headerFilter.controller.js described in the table in this section according to your desired level of filtering. For example, you can add a new filter to the order channel view but not to any of the other views. You can set filters on all levels, or on any subset of levels you need.
Implement the extension hook under controller Main.controller.js described in the table in this section. This updates the filter list as the application reads data from the data source.

Note
The filters must exist in the data source.

End of the note.

Controller	Hook	Use
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define OData query fields in the filter list content for the new filters, and define functions required to create the filters in the query
headerFilter.controller.js In package retail.car.lib.salesanalytics	extHookOnInitAddingCustomFilter	Adds the custom filters to the order channel view when the initial view is loaded
	extHookUpdatingCustomFilterInOrderChannelView	Updates custom filters when the order channel view is rendered during navigation to or from this view
	extHookUpdatingCustomFilterInStoreView	Updates custom filters when the store view is rendered during navigation to or from this view
	extHookUpdatingCustomFilterInCityView	Updates custom filters when the city view is rendered during navigation to or from this view
	extHookUpdatingCustomFilterInRegionView	Updates custom filters when the region view is rendered during navigation to or from this view
	extHookUpdatingCustomFilterInCountrylView	Updates custom filters when the country view is rendered during navigation to or from this view
	extHookUpdatingCustomFilterInCategoryView	Updates custom filters when the category view is rendered during navigation to or from this view
	extHookHandlingCustomFilterODataResponse (Optional)	Adds data retrieved for a custom filter into the corresponding control of the view

Hide Existing Buttons or Add Additional Ones to Header or Footer Section of a View

You can hide existing buttons or add additional buttons in the header or footer sections of views in the Net Sales application.

To fully implement this extensibility option, you must implement the following extensibility entity on the specified software layers according to your specific business needs.

Controller	Hook	Use
layout.controller.js In package retail.car.netsales	extHookOnUpdatingHeaderFooterOptions	Allows you to hide existing buttons or add additional ones to the header or footer section in views. For example, you can hide the Define Periods button if you do not need this type of data filtering.

Controller

Hook

Use

layout.controller.js

In package

retail.car.netsales

extHookOnUpdatingHeaderFooterOptions

Allows you to hide existing buttons or add additional ones to the header or footer section in views. For example, you can hide the Define Periods button if you do not need this type of data filtering.

Hide Existing Columns or Add Additional Ones to a Table

This section describes the extensibility entities you can use to hide existing columns, or to add additional columns to a table in the initial view of the Net Sales application. To hide columns or add additional columns to tables in detail views, see To hide columns or add additional ones to a table in the detail view at the end of this section.

To fully implement this extensibility option, you must implement each of the following extensibility entities on the specified software layers according to your specific business needs:

To hide columns in a table

Implement the UI controls in view detailTable.view.xml as described in section Display of UI Controls.

To add additional columns to a table

Implement the extension points in detailTable.view.xml.
For details, see the Extension Points section in this document.
Implement extension hooks under controller detailTable.controller.js described in the table in this section according to your requirements. These are optional.
Implement extension hooks under controller Main.controller.js described in the table in this section to extract data from the data source to render in the new columns. This is mandatory.

Note
To fully implement extensibility using this hook, you must also extend the NetSalesQuery entity in OData service MCSAServices.

End of the note.

Controller	Hook	Use
detailTable.controller.js In package retail.car.lib.salesanalytics	extHookOnInitDetailTable	Initializes new content in the table
extHookOnUpdatingDetailTable	Updates content in the table upon navigation from one level to another
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to redefine the OData query results fields used for the new columns.

Controller

Hook

Use

detailTable.controller.js

In package

retail.car.lib.salesanalytics

extHookOnInitDetailTable

Initializes new content in the table

extHookOnUpdatingDetailTable

Updates content in the table upon navigation from one level to another

Main.controller.js

In package

retail.car.netsales

extHookOnInitUpdatingDataSource

Allows you to redefine the OData query results fields used for the new columns.

To hide columns or add additional ones to a table in the detail view

You can hide columns or add additional columns to tables at the detail level in the Net Sales application.

To fully implement this extensibility option, you must implement the extension hook under controller Main.controller.js described in the table in this section to either hide columns in a table or to extract data to render in the new columns. This is mandatory.

Note Note

To fully implement extensibility using this hook, you must also extend the NetSalesQuery query in OData service MCSAServices.

End of the note.

Controller	Hook	Use
Main.controller.js In package retail.car.netsales	extHookOnAddColumnsItemTable	Allows you to add new columns to the table in the detail view Note When you implement the hook for this extensibility option, you must also define the data model for the new column. End of the note. Allows you to hide columns in a table in the detail view
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define the OData query results fields for the HANA views that the new table columns will use Allows you to define the queries that the new controls will use to extract data from HANA views

Controller

Hook

Use

Main.controller.js

In package

retail.car.netsales

extHookOnAddColumnsItemTable

Allows you to add new columns to the table in the detail view

Note
When you implement the hook for this extensibility option, you must also define the data model for the new column.

End of the note.
Allows you to hide columns in a table in the detail view

Main.controller.js

In package

retail.car.netsales

extHookOnInitUpdatingDataSource

Allows you to define the OData query results fields for the HANA views that the new table columns will use
Allows you to define the queries that the new controls will use to extract data from HANA views

Hide Existing Measures or Add Additional Ones to a Chart

You can hide measures or add additional measures to charts in in the Net Sales application views.

Implement extension hooks under controller detailChart.controller.js described in the table in this section according to your requirements. These hooks allow you to either hide existing measures, or to add new measures to the chart.
Implement the extension hooks under controller Main.controller.js described in the table in this section to extract data from the data sources and render it in the new measures. This is mandatory for adding new measures to a chart.

Note
To fully implement extensibility using this hook, you must also extend the NetSalesQuery entity in OData service MCSAServices.

End of the note.

Controller	Hook	Use
detailChart.controller.js In package retail.car.lib.salesanalytics	extHookOnInitDetailChart	Allows you to add new measures or hide existing measures in the chart
extHookOnUpdatingDetailChart	Updates content in the chart upon navigation from one view to another
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define the OData query results fields used for the new measures

Controller

Hook

Use

detailChart.controller.js

In package

retail.car.lib.salesanalytics

extHookOnInitDetailChart

Allows you to add new measures or hide existing measures in the chart

extHookOnUpdatingDetailChart

Updates content in the chart upon navigation from one view to another

Main.controller.js

In package

retail.car.netsales

extHookOnInitUpdatingDataSource

Allows you to define the OData query results fields used for the new measures

Add Custom Controls to a View

To fully implement this extensibility option, you must implement each of the following extensibility entities on the specified software layers according to your specific business needs:

This section describes the extensibility entities you can use to add custom controls to initial and detail views of the Net Sales application. To add controls to the deeper level single item detail views, see To add custom controls to single item detail views at the end of this section.

To add custom controls to detail view

This section provides details on adding custom controls to detail views.

Implement extension point layout_addCustomControl as required for the view level. For details, see Extension Points section.
Implement extension hooks under controller layout.controller.js described in the table in this section according to your requirements.
Implement the extension hooks under controller main.controller.js described in the table in this section. This allows you to define the queries and fields to extract data for the new controls. This is mandatory.

Controller	Hook	Use
layout.controller.js In package retail.car.lib.salesanalytics	extHookOnInitAddCustomControl	Allows you to define actions for new controls to occur when the views are loaded
extHookOnRestoreGroupView	Performs defined actions on new controls upon navigation from one view to another
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define data to extract from HANA views for the controls

Controller

Hook

Use

layout.controller.js

In package

retail.car.lib.salesanalytics

extHookOnInitAddCustomControl

Allows you to define actions for new controls to occur when the views are loaded

extHookOnRestoreGroupView

Performs defined actions on new controls upon navigation from one view to another

Main.controller.js

In package

retail.car.netsales

extHookOnInitUpdatingDataSource

Allows you to define data to extract from HANA views for the controls

To add custom controls to single item detail view

This section provides details on adding custom controls to single item detail views.

Implement the extension point itemDetails_addCustomControl. For details, see Extension Points section.
Implement extension hooks under controller itemDetails.controller.js described in the table in this section according to your requirements.
Implement the extension hooks under controller main.controller.js described in the table in this section. This allows you to define queries and fields to extract data for the new controls to render. This is mandatory.

Controller	Hook	Use
itemDetails.controller.js In package retail.car.netsales	extHookOnInitCustomControl	Allows you to define actions for new controls in single item detail views that occur when a view is loaded
	extHookOnRetrieveDataCustomControl	Performs defined actions on new controls in the single item detail view when data is retrieved from the HANA view
	extHookOnUpdatingDataCustomControl	Allows you to define actions for new controls in the single item details view that occur when the view is refreshed
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define queries that the new controls will use to extract data from HANA views Extracts data from HANA views for the new controls

Change Number of Products to Display on Top and Bottom Filter Tabs

You can change the number of products to display on the Top and Bottom filter tabs from the default of 20 to another value in the Net Sales views.

To fully implement this extensibility option, you must implement the following extensibility entity on the specified software layer according to your specific business needs:

Controller	Hook	Use
Main.controller.js In package retail.car.netsales	extHookSetTopBottom	Allows you to change the number of products to display on the Top and Bottom filter tabs

Controller

Hook

Use

Main.controller.js

In package

retail.car.netsales

extHookSetTopBottom

Allows you to change the number of products to display on the Top and Bottom filter tabs

Change Threshold Value for Warnings and Critical Entries for Products

You can change the threshold value that determines when warnings and critical entries are displayed for certain products in detail views.

To fully implement this extensibility option, you must implement the following extensibility entity on the specified software layer according to your specific business needs:

Note Note

When you perform this implementation, additionally you must also extend the ArticleSalesInventoryVisibility query in OData service MCSAServices.

End of the note.

Controller	Hook	Use
Main.controller.js In package retail.car.netsales	extHookOnInitUpdatingDataSource	Allows you to define the rules for issuing alerts about critical stock levels, or other events in the detail views

Controller

Hook

Use

Main.controller.js

In package

retail.car.netsales

extHookOnInitUpdatingDataSource

Allows you to define the rules for issuing alerts about critical stock levels, or other events in the detail views

Other Extensibility Entities

The following extensibility options are designed for use along with specific UI controller hooks, or other extensibility entities. They are not designed to be used independently of those hooks. Refer to the extension hook referenced for each extensibility entity for information on all the elements required to implement that particular extensibility option.

Extension Points

View	Extension Point	Use
Add custom controls to views To fully implement this extensibility option, this extension point is used in conjunction with controller hooks described in the Add Custom Controls to a View section under the UI Controller Hooks section.
layout.view.xml In package retail.car.lib.salesanalytics	layout_addCustomControl	Allows you to add new custom controls to initial and detail views in the application
itemDetails.view.xml In package retail.car.netsales	itemDetails_addCustomControl	Allows you to add new custom controls to the single item detail view in the application
Add additional columns to a table To fully implement this extensibility option, this extension point is used in conjunction with controller hooks described in the Hide Existing Columns or Add Additional Ones to a Table section under the UI Controller Hooks section.
detailTable.view.xml In package retail.car.lib.salesanalytics	detailedTable_addColumn	Allows you to add new columns to a table in a view
	detailedTable_addColumnListItem	Allows you to link new columns in a table in a view to a data model so that data can be provided to the new column

For more information about extension points, see Start of the navigation path help.sap.com/ssb Next navigation step Installation, Security, Configuration, and Operations Information Administrator's Guide Extensibility Extending the UI Layer UI Extensibility Workflow Checking the SAP-Enabled Extension Options Extension Points End of the navigation path .

Display of UI Controls

The following UI controls can be hidden on the app UI:

View	Control ID	Use
Hide UI controls in a view
layout.view.xml In package retail.car.lib.salesanalytics	breadcrumb_toolbar	Allows you to hide the breadcrumbs toolbar in a view
	filterContainer	Allows you to hide the filter list in a view
	headerContainer	Allows you to hide the header tiles in a view
	chart_toolbar	Allows you to hide toolbars for tables and charts in a view
	detailContainer	Allows you to hide the tootlbar for charts or tables in a view
Hide columns in a table in initial view
detailTable.view.xml In package retail.car.lib.salesanalytics	currentPeriodColumn	Allows you to hide the Base period details in the table
	previousPeriodColumn	Allows you to hide the Comparison period details in the table
	previousYearPeriodColumn	Allows you to hide the Comparison Last Year period details in the table

For more information about hiding UI controls, see Start of the navigation path help.sap.com/ssb Next navigation step Installation, Security, Configuration, and Operations Information Administrator's Guide Extensibility Extending the UI Layer UI Extensibility Workflow Checking the SAP-Enabled Extension Options Concealable UI Controls End of the navigation path .

Business Add-Ins (BAdIs)

This application does not use any BAdIs for extensibility.

Extension Includes

This application does not use any extension includes for extensibility.

More Information

For a general description of the extensibility options and procedures of Fiori apps, see Start of the navigation path help.sap.com/ssb Next navigation step Installation, Security, Configuration, and Operations Information Administrator's Guide Extensibility End of the navigation path .