Adding Dialog in SAPUI5 screen

[Jayakrishnan]

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,

JK

[former_member213564 · Accepted solution]

Hi Jayakrishnan,

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

Kind regards,

Filip

[Jayakrishnan · Accepted solution]

Thank you,

    I will try this

[former_member213564 · Accepted solution]

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

[Former Member]

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"

     }),

     ]

[pinakipatra]

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();

  },

});

[Jayakrishnan]

Thank you

[pfefferf]

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