Skip to Content
avatar image
Former Member

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

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?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

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

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 20, 2017 at 06:31 AM

    Please share some more details

    Add comment
    10|10000 characters needed 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

  • Sep 20, 2017 at 10:48 AM

    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

    Add comment
    10|10000 characters needed 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

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

    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";
    				}
    		}
    	};
    });
    
    Add comment
    10|10000 characters needed characters exceeded