Question Re: Adding Dialog in SAPUI5 screen in Technology Q&A

Adding Dialog in SAPUI5 screen

Jayakrishnan — Wed, 17 Dec 2014 06:27:49 GMT

Hi,

I am trying to create the dialog view in my SAPUI5 screen. At the bottom of my screen i am having a filter button. if i click tha filter button it has to popup the dialog screen. As of now it displaying like a small popup above my fiter icon.

For better view see the below screen.

1. This is what actually i want to show when i click the filter icon:

2.As of now i am getting like this:

How do i achieve this in my View.XML?

Please guide me on this.

Thank you,

Re: Adding Dialog in SAPUI5 screen

pfefferf — Wed, 17 Dec 2014 07:13:26 GMT

Hi JK,

you can achieve this using the ActionSelect Control.

Here is a link to the sample in the Explored application: SAPUI5 Explored

To show only an icon instead of a default value just change the "type" property to IconOnly.

Regards,

Florian

Re: Adding Dialog in SAPUI5 screen

Former Member — Fri, 08 Jan 2016 12:10:46 GMT

Hi Jayakrishnan,

you need dialog and fragments..check SAPUI5 SDK - Demo Kit Walkthrough tutorial for help.

Kind regards,

Filip

Re: Adding Dialog in SAPUI5 screen

Jayakrishnan — Thu, 14 Jan 2016 15:56:02 GMT

Thank you,

I will try this

Re: Adding Dialog in SAPUI5 screen

pinakipatra — Thu, 14 Jan 2016 16:19:36 GMT

Hi ,

Think what you need is

sap.m.ViewSettingsDialog

SAPUI5 Explored

Below is a sample code for that (Illustrative -- not the best practices)

applySettingsFilter:function(){

if(sap.ui.getCore().byId('idExpTrackDialog') == undefined){

new sap.m.ViewSettingsDialog('idExpTrackDialog',{

title : 'Filter / Sort Export Orders',

confirm : function(oEvent){

//Sample Function

}

filterItems : [

new sap.m.ViewSettingsFilterItem({

text:'Customer',

}). bindAggregation("items","/CustomersF4Set",

new sap.m.ViewSettingsItem({

text : '{Name}',

key : '{Customerid}'

}),null, null).setModel(sap.ui.getCore().getModel("idSalesOrderModel")),

new sap.m.ViewSettingsFilterItem({

text:'Material',

}). bindAggregation("items","/MaterialSet",

new sap.m.ViewSettingsItem({

text : '{Arktx}',

key : '{Matnr}'

}),null, null).setModel(sap.ui.getCore().getModel("idSalesOrderModel")),

new sap.m.ViewSettingsFilterItem({

text:'Currency',

items : [

new sap.m.ViewSettingsItem({

text : 'USD',

key : 'USD'

}),

new sap.m.ViewSettingsItem({

text : 'EUR',

key : 'EUR'

}),

new sap.m.ViewSettingsItem({

text : 'INR',

key : 'INR'

})

]

}),

new sap.m.ViewSettingsFilterItem({

text:'Ship Type',

items : [

new sap.m.ViewSettingsItem({

text : 'AIR',

key : 'AIR'

}),

new sap.m.ViewSettingsItem({

text : 'SEA',

key : 'SEA'

}),

new sap.m.ViewSettingsItem({

text : 'COUR',

key : 'COUR'

}),

new sap.m.ViewSettingsItem({

text : 'ROAD',

key : 'ROAD'

})

]

}),

] ,

sortItems : [

new sap.m.ViewSettingsItem({

text:'Value',

selected : true

}),

new sap.m.ViewSettingsItem({

text:'Date'

})

]

})

}

sap.ui.getCore().byId('idExpTrackDialog').open();

});

Re: Adding Dialog in SAPUI5 screen

Jayakrishnan — Thu, 14 Jan 2016 16:23:12 GMT

Thank you

Re: Adding Dialog in SAPUI5 screen

Former Member — Thu, 14 Jan 2016 17:13:05 GMT

In the mean time I did same for my project, so here is my code.

In your controller that is going to manage your fragment add function to open your dialog.


// open dialog when "idoIconFilter" is clicked
var oIconFilter = this.getView().byId("idoIconFilter");
var that = this;
    oIconFilter.attachPress(function(oEvent) {
   
    that._getFilerOptinsDialog().open();
   
    });

Add helper method to your controller for creating your dialog


  _getFilerOptinsDialog : function () {
       
        // helper function is instantiating the fragment by 
        // calling the sap.ui.xmlfragment method with the path to the fragment definition 
        //as an argument. The function returns the instantiated controls for further use in the app
       
        // create dialog lazily
            if (!this._oDialog) {
                // create dialog via fragment factory
            // we pass PlansOverviewPieChartController as parameter so the fragment can use it
            // i.e. this controller has handler functions for the fragment
               this._oDialog = sap.ui.xmlfragment("path.to.your.fragment.view.FilterOptionsDialog", this);
               // connect dialog to view (models, lifecycle)
               this.getView().addDependent(this._oDialog);
            }
                        
            return this._oDialog;
         },

Create your fragment view


<core:FragmentDefinition
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core" >
   <Dialog
      title="{i18n>filter.dialog.title}">
      
      
      <l:VerticalLayout
  class="sapUiContentPadding"
  width="100%">
  <l:content>

     <!-- Filter by date range -->
  <Label text="{i18n>filter.dialog.dateRange}"  labelFor="filterDateRangeSelection"/>
  <DateRangeSelection
  id="filterDateRangeSelection"
  class="sapUiSmallMarginBottom"
  displayFormat="yyyy/MM/dd"
  />

  <!-- Filter by plan name(s) -->
  <Label text="{i18n>filter.dialog.planNames}" labelFor="filterPlanNames"/>
  <MultiInput id="filterPlanNames" 
  suggestionItems="{
                         path: 'plan>/PlansSet',
                         sorter: { path: 'plan>Name' }
                     }"
        showValueHelp="false"
        placeholder="{i18n>filter.dialog.planNames.placeHolder}"
        enableMultiLineMode="true" >
         
    <core:Item key="{plan>TestPlanIds}" text="{plan>Name}" />
     </MultiInput>  


  </l:content>
  </l:VerticalLayout>
      
      <beginButton>
         <Button
          type="Accept"
            text="{i18n>filter.dialog.button.ok}"
            press="onCloseFilterOptionsDialogConfirm"/>
      </beginButton>
      <endButton>
         <Button
            type="Reject"
            text="{i18n>filter.dialog.button.cancel}"
            press="onCloseFilterOptionsDialogCancel"/>
      </endButton>
      
   </Dialog>
</core:FragmentDefinition>

Add further helper functions to your controller for handling logic forthe fragment. In my case this are onCloseFilterOptionsDialogCancel

and onCloseFilterOptionsDialogConfirm


onCloseFilterOptionsDialogConfirm : function () {
         
     // do some logic
     // ....
  // ....
   
    this._getFilerOptinsDialog().close();
         
},
         
 onCloseFilterOptionsDialogCancel : function () {
     // do some logic
     // ....
  // ....
   
    this._getFilerOptinsDialog().close();
}

Kind regards,

Filip

Re: Adding Dialog in SAPUI5 screen

Former Member — Mon, 09 May 2016 10:47:18 GMT

Hi JC,

If the list items as displayed on clicking filter icon are coming from 'sap.m.List' then you can use 'mode' property of the List and set it to 'SingleSelect'.

mode: sap.m.ListMode.SingleSelect,

items: [

new sap.m.StandardListItem({

title: "Item 1"

}),

new sap.m.StandardListItem({

title: "Item 2"

}),

]