Showing posts with label formatter. Show all posts
Using Parts in formatters to pass multiple fields

Using Parts in formatters to pass multiple fields

Sanjo Thomas•03:14:00

When working with SAPUI5, it's common to use formatters to manipulate data before it's displayed on a view. One challenge that developers often face is passing multiple fields to a formatter function. Fortunately, this can be easily achieved by using parts.



Parts are essentially placeholders that can be used to represent different binding paths in a formatter function. By using parts, you can pass any number of fields to a formatter function, making it much more flexible and powerful.

To use parts in a formatter function, you need to define them in the XML view where the formatter is being used. Here's an example:

```

<Text text="{parts: [{path: 'firstName'}, {path: 'lastName'}], formatter: '.fullNameFormatter'}" />

```

In this example, we're using a Text control and binding its text property to the result of a formatter function called `fullNameFormatter`. We're also defining two parts using the `parts` property. The first part refers to the `firstName` field, and the second part refers to the `lastName` field.


To access these parts in the formatter function, you can use the `parts` parameter. This parameter is an array that contains all the parts defined in the view, in the order they were defined. Here's an example of a formatter function that uses parts to concatenate the first and last names:


```

fullNameFormatter: function(firstName, lastName) {

  var firstName = firstName;

  var lastName = lastName;

  return firstName + ' ' + lastName;

}

```


In this function, we're using the both parameter values to retrieve the values of the first and last name parts, and then concatenating them with a space in between.


Using parts in SAPUI5 formatters is a powerful technique that can greatly enhance the flexibility and functionality of your applications. By defining parts in your views and accessing them in your formatter functions, you can pass any number of fields to your formatter and manipulate them in a variety of ways.

Read more
SAP UI5 Most Common and Basic Examples

SAP UI5 Most Common and Basic Examples

Sanjo Thomas•05:35:00



1. Table Examples:

Get selected table row values
Getting Table Column Values(To get all the values available in the particular row)
Get Table row data by rowContext(),
Delete table rows,

Add and Delete Table Row values,
F4 inside table row(F4 value help in Inside sap.m.table)
Table rows move up and down(Interchanging the table rows)
Set firstColumnCount based on List(Pagination based on given input in sap.ui.table rows)
Import csv as table values
Add Values into Table(Given input is adding to table row)
Table view more, view less with out using growth property(using button number of rows displayed)
Sap.ui.Table Binding
Table Rebinding after adding some value to the table,
Table Merge Cells,
Muitiple table header fixedRowCount
Mouse Over and Mouse Leave event in table,


2. Combo Box Examples:

ComboBox in table,
Multi Select Combo Box,
Combo box,
Get selected Item in combobox,
 
3. Navigation Between Views:

Values Pass between List to Detail-
Master/Detail example,

4. Chart Examples

customize the chart and you can get code for that customized chart,
sap.viz.ui5.Bar example,
sap.viz.ui5.Stacked Chart,
Get selected Bar Values in graph,

5. Drag and Drop Examples:

Drag and Drop in Multi Combo Box,

6. Tree Table Examples:

Tree Table with Dynamic Columns,
Tree Table,
Tree Table with Select Option,

7. Generate Pdf Examples:

Export to Pdf from UI5 side,

8. Tab Examples:

Tab in ui5(Pressing Tab will focus on input fields)

9. Search Examples:

Search the vales in list,
Search field will filter the data by given inputs
Input With Suggestion,

10. Layout Examples:

Form Editable True or False from Model,
overlay container,
Simple Form in a panel

11. Formatter Examples:

Date Time input Display only year, Time etc,.
Amount Format using Formatter,
Table Format date to dd.MM.YYYY,
oData Table Filter,

12. Css Examples:

Table row color using Formatter,
Text color using formatter,

13. Busy Dialog Examples:


14. Others:

Get selected radio button,
List Box,
Virtual KeyBoard,
sap.m.VBox footer example,
Move Item from one Json Model to another Json Model,
List Data Binding
Custom Control
Signature Pad,
Toggle button in pop up,
Nested Pop over,
DropDown in panel header,
Input editable and read only,
sap.m.select with default text “—select—“
ListItem by default 1st item is selected,
Dialog button’s
Add Clear icon to sap.m.input,
Float Label example,


Watch sapui5 video tutorials from youtube, here's the video on introduction to sapui5:



SDK Provided examples.
For .js View Programming examples - SAPUI5 SDK - Demo Kit
For .xml View Programming examples - SAPUI5 Explored

Read more