Skip to Content
0

how to filter tiles, where data is taken from json file

Sep 18, 2017 at 01:15 PM

75

avatar image
Former Member

I have json file containing data..which are displayed using tiles..I dont want all the tiles to be displayed.I need to filter these tiles..Is there a way in sapui5 ?

and how can we drag and reorder the tiles?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
avatar image
Former Member
Sep 23, 2017 at 11:28 PM
0

HI

I think I have it working here

http://jsbin.com/tulecal/edit?html,js,output

please check the statusText function. Please do not return "true" or "false", return true or false instead

and in the xml type="{type}" should be type="{data>type}"

thanks

-D

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Thanks Dennis

0
Irfan Gokak Sep 20, 2017 at 06:31 AM
0

Please share some more details

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Irfan,

Here is the json file

{
  "TileCollection" : [
    {
      "icon" : "inbox",
      "number" : "89",
      "title" : "Approve Leave Requests",
      "info" : "Overdue",
      "infoState" : "Error"
    },
    {
      "type" : "Create",
      "title" : "Create Leave Requests",
      "info" : "28 Days Left",
      "infoState" : "Success"
    },
    {
      "icon" : "travel-expense-report",
      "number" : "281",
      "numberUnit" : "euro",
      "title" : "Travel Reimbursement",
      "info" : "1 day ago"
    },
    {
      "icon" : "loan",
      "number" : "2380",
      "numberUnit" : "euro",
      "title" : "My Salary",
      "info" : "8 days ago"
    },
    {
      "icon" : "lab",
      "number" : "1",
      "numberUnit" : "Invention",
      "title" : "Test Lab Reports",
      "info" : "8 Days Ago"
    },
    {
      "icon" : "inbox",
      "type" : "Monitor",
      "title" : "Leave Request History"
    },
    {
      "type" : "Create",
      "title" : "Create Purchase Order",
      "info" : "890€ Open Budget",
      "infoState" : "Success"
    },
    {
      "icon" : "stethoscope",
      "number" : "3",
      "title" : "Yearly Health Check",
      "info" : "3 year overdue",
      "infoState" : "Error"
    },
    {
      "icon" : "meal",
      "type" : "Monitor",
      "title" : "Meal Schedule"
    },
    {
      "icon" : "cart",
      "number" : "787",
      "numberUnit" : "euro",
      "title" : "My Shopping Carts",
      "info" : "Waiting for Approval",
      "infoState" : "Warning"
    },
    {
      "icon" : "factory",
      "number" : "2",
      "numberUnit" : "Outages",
      "title" : "Factory Power Management",
      "info" : "Production On Hold",
      "infoState" : "Error"
    },
    {
      "icon" : "calendar",
      "title" : "Team Calendar"
    },
    {
      "icon" : "pie-chart",
      "number" : "5",
      "title" : "Financial Reports",
      "info" : "4 day ago",
      "infoState" : "Warning"
    }
  ]
}

the view

<mvc:View
	controllerName="sap.ui.demo.wt.controller.App"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc">
	<App id="app">
		<pages>
			<Page title="Tilesss" showHeader="true" 
					enablScrolling="false">
				<content>

    <TileContainer
      id="container"
      tileDelete="handleTileDelete"
      tiles="{data>/TileCollection}"
press="onPress"
     >
      <StandardTile
        icon="sap-icon://{data>icon}"
        type="{type}"
        number="{data>number}"
numberState="{infoState}"
        numberUnit="{data>numberUnit}"
         activeIcon="sap-icon://{data>icon}"
        title="{data>title}"
        info="{data>info}"
        infoState="{data>infoState}" press="onPress"        />
    </TileContainer>
				</content>
    <footer>
      <Toolbar>
        <ToolbarSpacer/>
          <Button text="Edit" press="handleEditPress" />
          <Button text="Busy state" press="handleBusyPress" />
        <ToolbarSpacer/>
      </Toolbar>
    </footer>
			</Page>
		</pages>
	</App>
</mvc:View>

The Tile container gets the data from json file (data>TileCollection) and displays all the data in the form of tiles..But i need to display the tiles that only has the infoState as "error"..i.e filter the tiles based on infoState property

0
Ravi kiran R Sep 20, 2017 at 10:48 AM
0

Hi

"The Tile container gets the data from json file (data>TileCollection) and displays all the data in the form of tiles..But i need to display the tiles that only has the infoState as "error"..i.e filter the tiles based on infoState property".

You can actually apply formatter, where the formatter is applied on the visible property of "StandardTile".

So that, the formatter function will check if "infoState" for error and returns true else returns false.

Regards,

Ravikiran

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi Ravi,

Its not working ..maybe my code is wrong ..I have pasted the code down below in the next comment..Please correct it

0
avatar image
Former Member Sep 21, 2017 at 07:34 AM
0

Hi

Thanks for the reply. I have done as guided but only the first tile is displaying even though the infoState is not Error

Inspect :

The output is attached here. Check the inspect element . According to formatter.js file all infoState values in the json file has to be logged but only two infoStates are logged. The first infoState in json file is Success and the second one is Error . But two straight infoStates are logged

{
  "TileCollection" : [
    {
      "icon" : "hint",
      "type" : "Monitor",
      "title" : "Tiles: a modern UI design pattern for overview & navigation.",
      "name":"detail",
       "act":"false",
      "infoState" : "Success"
    },
    {
      "icon" : "inbox",
      "number" : "89",
      "title" : "Approve Leave Requests",
      "info" : "Overdue",
      "infoState" : "Error",
     "name":"detail2",
     "act":"true"
    },
    {
      "type" : "Create",
      "title" : "Create Leave Requests",
      "info" : "28 Days Left",
      "infoState" : "Success"
    },
    {
      "icon" : "travel-expense-report",
      "number" : "281",
      "numberUnit" : "euro",
      "title" : "Travel Reimbursement",
      "info" : "1 day ago",
      "infoState" : "Success"
    },
    {
      "icon" : "loan",
      "number" : "2380",
      "numberUnit" : "euro",
      "title" : "My Salary",
      "info" : "8 days ago",
      "infoState" : "Success"
    },
    {
      "icon" : "lab",
      "number" : "1",
      "numberUnit" : "Invention",
      "title" : "Test Lab Reports",
      "info" : "8 Days Ago",
      "infoState" : "Success"
    },
    {
      "icon" : "inbox",
      "type" : "Monitor",
      "title" : "Leave Request History",
      "infoState" : "Success"
    },
    {
      "type" : "Create",
      "title" : "Create Purchase Order",
      "info" : "890€ Open Budget",
      "infoState" : "Success"
    },
    {
      "icon" : "stethoscope",
      "number" : "3",
      "title" : "Yearly Health Check",
      "info" : "3 year overdue",
      "infoState" : "Error"
    },
    {
      "icon" : "meal",
      "type" : "Monitor",
      "title" : "Meal Schedule",
      "infoState" : "Success"
    },
    {
      "icon" : "cart",
      "number" : "787",
      "numberUnit" : "euro",
      "title" : "My Shopping Carts",
      "info" : "Waiting for Approval",
      "infoState" : "Warning"
    },
    {
      "icon" : "factory",
      "number" : "2",
      "numberUnit" : "Outages",
      "title" : "Factory Power Management",
      "info" : "Production On Hold",
      "infoState" : "Error"
    },
    {
      "icon" : "calendar",
      "title" : "Team Calendar",
      "infoState" : "Success"
    },
    {
      "icon" : "pie-chart",
      "number" : "5",
      "title" : "Financial Reports",
      "info" : "4 day ago",
      "infoState" : "Warning"
    }
  ]
}

The tile container:

  <TileContainer
      id="container"
      tileDelete="handleTileDelete"
      tiles="{data>/TileCollection}"
      tileMove="tileM"


     >
      <StandardTile
        icon="sap-icon://{data>icon}"
        type="{type}"
        number="{data>number}"
numberState="{data>infoState}"
        numberUnit="{data>numberUnit}"
         activeIcon="sap-icon://{data>icon}"
        title="{data>title}"
        info="{data>info}"
        infoState="{data>infoState}" press="onPress" 
        visible="{
			path: 'data>infoState',
			formatter: '.formatter.statusText'}" 
/>
    </TileContainer>

The formatter.js fie

sap.ui.define([], function () {
	"use strict";
	return {
		statusText: function (sStatus) {
				console.log(sStatus);
				if(sStatus=="Error"){
					return "true";
				}
				else{
					return "false";
				}
		}
	};
});

tileview1.png (13.3 kB)
tileview1.png (13.3 kB)
inspect.png (2.5 kB)
Share
10 |10000 characters needed characters left characters exceeded