UI annotations example

// defines the layer, where annotation will be implemented
@Metadata.layer: #CORE

// annotation belonging to UI.headerinfo describe an entity, its title and other
@UI.headerInfo:{
    // represents the title of the object page
  typeName: 'Parking',

  // represents a list title
  typeNamePlural: 'Parkings',

  // this annotation is mandatory and are used to represent the title of an item on the header of an item's object page
  title:{
  // defines exactly what type of hierarchy is used
  // STANDARD maps to standart DataField without any functionality
    type: #STANDARD,
    // defines the value of the title
    value: 'ParkID'
  },
  // describes another property of ui type DataFieldAbstract
  description:{
  // type of hierarchy with datafield
    type: #STANDARD,
    //path to the element with value
    value: 'ParkName'
  },
  // represents path to an element with URL to an image which represents the object
  imageUrl: 'imageUrl'
}

// defines how the result of a quiried commection of entitites is shaped and how this result is displayed
@UI.presentationVariant: [
{
// use this annotation to group and identify this group by it's value
  qualifier: 'ParkTable',

// represent a collection of visualization types that can be selected for UI
  visualizations: [{
  // which type of visualiztion is selected
    type:#AS_LINEITEM
  }],
  // this annotation represents a collection of sorting parameters for instances
  sortOrder: [{
  // defines y which property collection can be sorted
    by: 'ParkName',
    // Ascending sorting direction
    direction: #ASC
  }],
    // defines the collection of properties that must be included in the result of selection
  requestAtLeast: [ 'ParkID', 'ParkName', 'Capacity', 'CarsCount' ]
}]
annotate view zkhr_cc_c_park with
{
  @UI.hidden: true

  // defines properties for representing instances in a table or a list
  @UI.lineItem:
      [
        // specifies what type of mapping is used, determines which CDS elements are required of available
        // FOR_ACTION maps to DataForAction, in other words links action to the button
        // dataAction defines an action which we want to bind to the button ( must define it 'cause we are using FOR_ACTION' )
        // label represents value of the button text
      { type: #FOR_ACTION, position: 1, dataAction: 'BOPF:CHANGESTATUS', label: 'Make park nice' }
      ]
     // represents collection of specific data fields which with headerinfo identifies an entity to the end user
     // position defines place on UI on order of other elements
     // importance describe if element should be displayed on every device
     // type defines type if maping ( to what kind of object we are binding this element of UI )
     // label obvioslyy
  @UI.identification: [{ position: 10, importance: #HIGH, type: #FOR_ACTION, dataAction: 'BOPF:CHANGESTATUS', label: 'Make park nice'} ]
  ParkUUID;
  @UI.lineItem: [{
     position: 10,
     type: #STANDARD,
     importance: #HIGH,
     //refers to the action on the semantic object
     // i guess display means that when we clicking on any instance from the table
     semanticObjectAction: 'display'
   }]
   // defines how text and code will be placed
   // TEXT_LAST means that code is displayed in front of the text for ex. EN ( English )
  @UI.textArrangement: #TEXT_LAST
  // this annotation consist of different settings for representing parts of an object in a form
  @UI.fieldGroup: [{
  // like an id for a group
    qualifier: 'Parking',
    // should we display it?
    importance: #HIGH,
    position: 10
  }]
  // allowing filtering data by this element
  @UI.selectionField: [{
  position: 10
  }]
  @EndUserText.quickInfo: 'Park ID'
  @EndUserText.label: 'Park ID'
  ParkID;
  @UI.lineItem: [{
   position: 20,
   type: #STANDARD,
   importance: #HIGH
   }]
  @EndUserText.quickInfo: 'Park Name'
  @UI.fieldGroup: [{
     qualifier: 'Parking',
     importance: #HIGH,
     position: 20
     }]
  @UI.selectionField: [{
  position: 15
  }]
  @EndUserText.label: 'Park Name'
  ParkName;
  @UI.fieldGroup: [{
   qualifier: 'Parking',
   importance: #HIGH,
   position: 30
   }]
  @EndUserText.quickInfo: 'Park Capacity'
  @EndUserText.label: 'Park Capacity'
  @UI.lineItem: [{
  position: 30,
  type: #STANDARD,
  importance: #HIGH
  }]
  Capacity;

  @UI.lineItem: [{
    label : 'Car Count',
    position: 25,
    type: #AS_DATAPOINT,
    importance: #HIGH,
    criticality: 'CapacityCriticality'
  }]
  @UI.dataPoint:{
    title: 'Cars Count',
    visualization: #PROGRESS,
    targetValueElement: 'Capacity',
      criticality: 'CapacityCriticality'
  }
  @UI.fieldGroup: [{
     qualifier: 'Parking',
     importance: #HIGH,
     position: 20
     }]
    @EndUserText.label: 'Amount of cars'
  CarsCount;

  @UI.lineItem: [{
   position: 50,
   type: #STANDARD,
   importance: #HIGH,
   criticality: 'CapacityCriticality'
   }]
  @UI.textArrangement: #TEXT_LAST
  @UI.dataPoint: {
    description: 'Park Status',
    title: 'Park Status',
    criticality: 'CapacityCriticality'
  }
  @UI.selectionField: [{
    position: 25
  }]
  @EndUserText.label: 'Park Status'
  ParkStatus;
  @UI.lineItem: [{
   position: 60,
   type: #STANDARD,
   importance: #HIGH
   }]
  @UI.fieldGroup: [{
        qualifier: 'ParkAdmin',
        importance: #HIGH,
        position: 10
        }]
  @EndUserText.quickInfo: 'Created ON'
  @EndUserText.label: 'Creation Date/Time'
  crea_date_time;
  @UI.fieldGroup: [{
   qualifier: 'ParkAdmin',
   importance: #HIGH,
   position: 20,
   type: #AS_CONTACT
   }]
  @UI.lineItem: [{
  position: 70,
  type: #STANDARD,
  importance: #HIGH
  }]
  @EndUserText.quickInfo: 'Created BY'
  @EndUserText.label: 'Created by'
  crea_uname;
  @UI.fieldGroup: [{
   qualifier: 'ParkAdmin',
   importance: #HIGH,
   position: 30
   }]
   @EndUserText.label: 'Last change'
  lchg_date_time;

}