How to create sap.ui.comp.smartfilterbar.Smartfilterbar ????

Hi guys,

I'm using sapui5 version: 1.30.0.

I just want to test smartfilterbar, it seems a very convenient way for search criteria.

I'm following the below example trying to use the smartfilterbar on mock server. But I just can't get it work.

https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.ui.comp.sample.smartfilterbar/preview

Below is the best I can get:

Here's my metadata xml:

<?xml version="1.0" encoding="UTF-8"?><edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" Version="1.0">    <edmx:DataServices m:DataServiceVersion="2.0">        <Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="ae">            <EntityType Name="account">                <Key>                    <PropertyRef Name="key"/>                </Key>                <Property Name="key" Nullable="false" Type="Edm.Guid"/>                <Property Name="businessType" Type="Edm.String" sap:filterable="true"/>                <Property Name="feetype" Type="Edm.String" sap:filterable="true"/>                <Property Name="account1" Type="Edm.String"/>                <Property Name="account2" Type="Edm.String"/>            </EntityType>            <EntityContainer Name="default" m:IsDefaultEntityContainer="true">                <EntitySet EntityType="ae.account" Name="accounts"/>            </EntityContainer>        </Schema>    </edmx:DataServices></edmx:Edmx>

Here's my view:

<mvc:View    xmlns:mvc="sap.ui.core.mvc"    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"    xmlns="sap.m">    <Page id="page" title="SmartFilter - Customer Line Items" enableScrolling="false">        <content>                   <smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="account">            </smartFilterBar:SmartFilterBar>        </content>    </Page></mvc:View>

I've set up the mock server properly. I don't know where I'm doing wrong.

Could someone help???