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

[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?

[former_member182862 · Accepted solution]

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

[Former Member · Accepted solution]

Thanks Dennis

[Former Member]

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";
				}
		}
	};
});

[former_member192494]

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

[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

[irfan_gokak]

Please share some more details

[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