In this blog post you will learn how to avoid/restrict opening of new dialog/fragment/screen and allow direct input entry for Smart Filters in SAP UI5/FIORI while running on Mobile Devices.

Introduction:

Fiori Elements are becoming increasingly popular. They provide a framework to generate SAPUI5 apps at run time based on metadata annotations.

Instead of generating a whole application, developers can also use Smart Controls for their existing apps, to add tables, forms, etc. in a fast way. These controls use annotations that add semantics and structures to the data, provided by the user.

All these annotations should be added to ANNOTATION XML file for implementing value help for input fields of Smart Filters.

How to implement value help without front end coding is explained in detail at below link:

Implement Value Help With UI5 Annotations

Problem Statement

UI5 Application developed with Smart Controls Annotations for value help will open a new screen to type input value while running on Mobile devices. Here is a problem of additional clicks and is frustrating for user to always type and close screen to enter value for next filter.

Mobile Version of UI5 Application

Below is the initial screen of application while running on mobile device.

As soon as you click to type Sales Organization in above screen new blank screen will open for accepting input and will start suggesting values as soon as you type in the input field.

And also it is not auto focused hence will not open keypad of mobile for typing input value.User has to click in the input field of dialog to proceed for typing.

So for each input value user has to click 3 times before proceeding to type value for next input.In this example user has 4 input fields so user has to click 12 times to feed input before proceeding to get results/output.

Desktop/Tablet Version of UI5 application:

User able to type directly in input fields and gets value suggestion shown as below:

Target Audience :

Beginners to SAP UI5 Application Development and Usage of ANNOTATIONS.

Root Cause:

The new dialog opens up for value suggestion which is by default turned on while implementi ng value help with UI5 annotations.

So if you restrict value suggestion then the new dialog will not open and user will be able to type direct on first screen input fields.

How to restrict suggesting values ? Is a question as we have implemented value help/suggestion with annotation and not done any coding for same . And annotations does not have option to just implement value help and stop value suggestions.

Solution :

Here is the smart solution.

Please  add code as shown below to respective Controller to stop value suggestion only in mobile.

Details for Smart Filter Bar ID and Key for Input Field.

Conclusion :

In this blog post we have learned how to restrict/ avoid dialog opening for value help suggestion when UI5/FIORI application is running on Mobile Like Devices. Hence we learnt to avoid extra clicks for application users and reducing time to achieve expected results.