Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Ensure we always use public packages, i.e. avoid using local registries from ~/.npmrc
@sap:registry=https://registry.npmjs.org/
registry=https://registry.npmjs.org/
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
## Description

This is a sample app to manage incidents. This app is based on SAP Fiori elements list report object for OData V4.

To learn how to build this app, check out [this](https://developers.sap.com/group.fiori-tools-odata-v4-incident.html) tutorial.

## Requirements

This app is intended as a sample app that can be previewed using SAP Fiori tools in SAP Business Application Studio or Visual Studio Code. Refer to [documentation](https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/2d8b1cb11f6541e5ab16f05461c64201.html) for help on how to get started with SAP Fiori tools.

## Download and Installation

1. After cloning the repository, open `fiori-elements-incidents-management` folder as the root of the workspace
2. At the root of the workspace, type `npm install` in the terminal
3. Click on "SAP Fiori" on the left activiity bar
4. Right click on the project and select `Preview Application`

## License

Copyright (c) 2009-2026 SAP SE or an SAP affiliate company. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](../../../LICENSES/Apache-2.0.txt) file.


Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
using IncidentService as service from '../srv/incidentservice';
using from '../srv/common';

annotate service.Incidents with @(UI : {
//basic list report annotations
//the presentation variant defines a per default ascending sorting for the LR table
//https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/Common.md#SortOrderType
// PresentationVariant : {
// SortOrder : [{
// $Type : 'Common.SortOrderType',
// Property : priority_code
// }],
// Visualizations : ['@UI.LineItem']
// },
//the lineItem annotation defines the table columns for UI display of the annotated entity
//https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/UI.md#LineItem
//Table columns are defined by building blocks of type DataFieldAbstract
//https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/UI.md#DataFieldAbstract
LineItem : [
{
$Type : 'UI.DataField',
Value : identifier
},
{
$Type : 'UI.DataField',
Value : priority_code,
Criticality : priority.criticality,
CriticalityRepresentation : #WithoutIcon
},
{
$Type : 'UI.DataField',
Value : incidentStatus_code
},
{
$Type : 'UI.DataField',
Value : category_code
},
//insert your line item enhancement here
{
$Type : 'UI.DataField',
Value : title
}
],

//the managed associations incidentStatus, category and priority provide a denormalized _code property to the root entity SafetIncidents
//Documentation managed associations: https://cap.cloud.sap/docs/guides/domain-models#use-managed-associations
//usage of aspect sap.common.codelist for the associated entities automatically provides value help support for the selection fields
//the entity definitions can be found in file db/schema.cds
//Documentation codelists: https://cap.cloud.sap/docs/cds/common#aspect-sapcommoncodelist

SelectionFields : [
incidentStatus_code,
priority_code,
//insert your selection fields enhancement here
category_code
],

// Information for the header area of an entity representation
HeaderInfo : {
TypeName : '{i18n>Incident}',
TypeNamePlural : '{i18n>Incidents}',
TypeImageUrl : 'sap-icon://alert',
Title : {Value : title},
Description : {Value : ID}
},

//Facets for additional object header information (shown in the object page header)
HeaderFacets : [{
$Type : 'UI.ReferenceFacet',
Target : '@UI.FieldGroup#HeaderGeneralInformation'
}],

//Group of fields with an optional label
//https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/UI.md#FieldGroupType
FieldGroup #HeaderGeneralInformation : {
$Type : 'UI.FieldGroupType',
Data : [
{
Value : priority_code
},
{
Value : incidentStatus_code
},
{
Value : category_code
},
{
$Type : 'UI.DataFieldForAnnotation',
Target : 'assignedIndividual/@Communication.Contact',
Label : '{i18n>AssignedContact}'
}
]
},

FieldGroup #IncidentDetails : {
$Type : 'UI.FieldGroupType',
Data : [
{
$Type : 'UI.DataField',
Value : identifier
},
{
$Type : 'UI.DataField',
Value : title
},
//insert your field group enhancement here
{
$Type : 'UI.DataField',
Value : description
}
]
},

//insert your new field group here
FieldGroup #GeneralInformation : {
$Type : 'UI.FieldGroupType',
Data : [
{
$Type : 'UI.DataField',
Value : priority_code,
},
{
$Type : 'UI.DataField',
Value : category_code,
},
{
$Type : 'UI.DataField',
Value : incidentStatus_code,
},
],
},

//object page content area is organized by facets referring to e.g. fieldgroup and lineItem annotations
//https://github.com/SAP/odata-vocabularies/blob/master/vocabularies/UI.md#Facet
Facets : [
{
$Type : 'UI.CollectionFacet',
Label : '{i18n>IncidentOverview}',
ID : 'IncidentOverviewFacet',
Facets : [
{
$Type : 'UI.ReferenceFacet',
Label : '{i18n>IncidentDetails}',
ID : 'IncidentDetailsFacet',
Target : '@UI.FieldGroup#IncidentDetails'
},
//insert your reference facet enhancement here
{
$Type : 'UI.ReferenceFacet',
Target : '@UI.FieldGroup#GeneralInformation',
Label : '{i18n>GeneralInformation}',
ID : 'GeneralInformationFacet',
},
]
},
//this facet shows a table on the object page by referring to a lineItem annotation via association incidentFlow
//the referred LineItem annotation definition for entity IncidentFlow is defined below
{
$Type : 'UI.ReferenceFacet',
Label : '{i18n>IncidentProcessFlow}',
ID : 'ProcessFlowFacet',
Target : 'incidentFlow/@UI.LineItem',
![@UI.Hidden] : isDraft
}
]
});

annotate service.IncidentFlow with @(UI : {
LineItem : [
//insert your column enhancement here
{
$Type : 'UI.DataField',
Value : stepStatus,
Criticality : criticality,
},
{
$Type : 'UI.DataField',
Value : processStep
},
{
$Type : 'UI.DataField',
Value : stepStartDate
},
{
$Type : 'UI.DataField',
Value : stepEndDate
},
{
$Type : 'UI.DataField',
Value : incident.assignedIndividual.fullName,
Label : '{i18n>CreatedBy}'
}
]
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
## Application Details
| |
| ------------- |
|**Generation Date and Time**<br>Fri Dec 09 2024 13:43:41 GMT+0000 (Coordinated Universal Time)|
|**App Generator**<br>@sap/generator-fiori-elements|
|**App Generator Version**<br>1.8.3|
|**Generation Platform**<br>SAP Business Application Studio|
|**Template Used**<br>List Report Page V4|
|**Service Type**<br>Local Cap|
|**Service URL**<br>http://localhost:4004/incident/
|**Module Name**<br>incidents|
|**Application Title**<br>Incidents Management|
|**Namespace**<br>sap.fe.demo|
|**UI5 Theme**<br>sap_horizon|
|**UI5 Version**<br>1.108.0|
|**Enable Code Assist Libraries**<br>False|
|**Enable TypeScript**<br>False|
|**Add Eslint configuration**<br>False|
|**Main Entity**<br>Incidents|
|**Navigation Entity**<br>None|

## incidents

SAP Fiori Elements

### Starting the generated app

- This app has been generated using the SAP Fiori tools - Application Generator, as part of the SAP Fiori tools suite. In order to launch the generated app, simply start your CAP project and navigate to the following location in your browser:

http://localhost:4004/incidents/webapp/index.html

- It is also possible to run the application using mock data that reflects the OData Service URL supplied during application generation. In order to run the application with Mock Data, run the following from the generated app root folder:

```
npm run start-mock
```

#### Pre-requisites:

1. Active NodeJS LTS (Long Term Support) version and associated supported NPM version. (See https://nodejs.org)


Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
using IncidentService as service from '../../srv/incidentservice';
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "incidents",
"version": "0.0.1",
"description": "SAP Fiori Elements",
"keywords": [
"ui5",
"openui5",
"sapui5"
],
"main": "webapp/index.html",
"scripts": {
"deploy-config": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf"
},
"devDependencies": { }
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
specVersion: "2.5"
metadata:
name: sap.fe.demo.incidents
type: application
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
sap.ui.define(
["sap/fe/core/AppComponent"],
function (Component) {
"use strict";

return Component.extend("sap.fe.demo.incidents.Component", {
metadata: {
manifest: "json"
}
});
}
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Common.xml">
<edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>
</edmx:Reference>
<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">
<edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
</edmx:Reference>
<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Communication.xml">
<edmx:Include Namespace="com.sap.vocabularies.Communication.v1" Alias="Communication"/>
</edmx:Reference>
<edmx:Reference Uri="/incident/$metadata">
<edmx:Include Namespace="IncidentService"/>
</edmx:Reference>
<edmx:DataServices>
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
//the UI5_184 view controller pair has to be used for UI5 version >= 1.84
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/fe/core/controllerextensions/RoutingListener',
'sap/ui/model/json/JSONModel',
'sap/m/MessageToast'
],
function (Controller, RoutingListener, JSONModel, MessageToast) {
"use strict";

return Controller.extend("myController", {
routingListener: RoutingListener,

constructor: function () {
Controller.apply(this, arguments);
// No need to instantiate the extension, it's done automatically
},

onInit: function () {
var oView = this.getView();
this.oProcessFlow1 = oView.byId("processflow1");

var sDataPath = jQuery.sap.getModulePath("sap.fe.demo.incidents.ext.controller", "/ProcessFlowLanesAndNodes.json");
var oModelPf1 = new JSONModel(sDataPath);
oView.setModel(oModelPf1, "ProcessFlowModel");
oModelPf1.attachRequestCompleted(this.oProcessFlow1.updateModel.bind(this.oProcessFlow1));
},

onNodePress: function (event) {
MessageToast.show("Node " + event.getParameters().getNodeId() + " has been clicked.");
}
});
});
Loading
Loading