Fiori Search User Interface

The FioriSearchView component is an extension (a subtype of SearchView) of Android's SearchView widget that provides a user interface for the user to enter a search query and submit a request to a search provider.

It shows a list of suggestions or results, if available, and allows the user to pick a suggestion or result to launch. Fiori Search View provides an out-of-the box implementation of a Search UI with an optional bar code reader that can be used to read numerical bar codes (representing, for example, product IDs) and perform search queries using them.

It can be used either as a persistent search view or as search dialog within the toolbar.

Note

When using FioriSearch in the toolbar, make sure that the color on the Search View does not match the color of Search background, or the icons will be invisible. You can set the Search background to either null or transparent to fix this issue.

Setting up FioriSearch

Setting up the FioriSearchView is a two step process.

1. Make sure that the application's theme overrides the SearchViewStyle. There are multiple ways to achieve this:

   • Directly apply the style attribute to the FioriSearchView. If you happen to have the FioriSearchView as UI component in your Activity then, as shown below you can directly apply the FioriSearchView to your search view.

             <com.sap.cloud.mobile.fiori.search.FioriSearchView
                   style="@style/FioriSearchView"
                   android:id="@+id/fiori_search_view_maps"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   app:iconifiedByDefault="false" />
     

   • Simply use the FioriTheme in your Activity while declaring your Activity in AndroidManifest.xml file. FioriTheme has overridden the @android:searchViewStyle attribute for you. Below is an example of an Activity.

             <activity
                     android:name=".search.DemoSearchActivity"
                     android:theme="@style/FioriTheme">
                     ...
             </activity>
     

   • Override the searchViewStyle attribute in your app theme. As shown below, you can override the searchViewStyle attribute in your Theme in order to allow FioriSearchView to find it.

                                     ...
         <item name="searchViewStyle">@style/FioriSearchView</item>
                                     ...
     

2. Follow the instructions to setup the SearchView from Android's official website at Creating Search View Interface.

Bar Code Scanning with FioriSearch

FioriSearch allows the user to perform bar code scanning using the device camera. It triggers the camera for the scanning, performs the scans, and sets up the query into the SearchBar. To enable the bar code scan in FioriSearchView follow the steps shown below:

1. Add Gradle dependency of google-vision library:

       implementation 'com.sap.cloud.android:google-vision:${versions.sapCloudAndroidSdk}'
   

2. Declare the QRCodeReaderActivity provided as part of the google-vision library into your android-manifest file:

       <activity
           android:name="com.sap.cloud.mobile.onboarding.qrcodereader.google.QRCodeReaderActivity"
           android:label="@string/app_name"
           tools:replace="android:theme"
           android:theme="@style/Onboarding.Default.Light.Theme">
       </activity>
   

By default FioriSearchBar provides support for scanning all bar code formats and camera auto focus. However, you can restrict the supported bar code formats to the format of interest using void setQRCodeReaderSettings(QRCodeReaderSettings QRCodeReaderSettings) API of FioriSearchView.

            mQRCodeReaderSettings = new QRCodeReaderSettings();
            // disable the auto focus
            mQRCodeReaderSettings.setAutoFocus(false);
            // only EMAIL types bar codes allowed
            mQRCodeReaderSettings.setBarcodeFormat(EMAIL);
            // set the new settings
            mFioriSearchView.setQRCodeReaderSettings(mQRCodeReaderSettings);

You can also add a verification phase for verifying the scanned bar code. To enable the verification of the scanned bar code, you must provide an implementation of QRCodeReaderActionHandler interface as the metadata to QRCodeReaderActivity declared in your androidmanifest.xml file.

        <activity
            android:name="com.sap.cloud.mobile.onboarding.qrcodereader.google.QRCodeReaderActivity"
            android:label="@string/app_name"
            tools:replace="android:theme"
            android:theme="@style/Onboarding.Default.Light.Theme">
          <meta-data
              android:name="action_handler"
              android:value="com.sap.cloud.mobile.fiori.demo.onboarding.QRCodeReaderActionHandlerImpl"/>
        </activity>

public class QRCodeReaderActionHandlerImpl implements QRCodeReaderActionHandler {
    final private static String TAG = "QRCodeReaderAHandler"; //abbreviated

    /**
     * Validates all non-null bar-codes after a user defined delay. If the validation is interrupted the result is false.
     *
     * @param fragment the caller fragment of the QR code reader activity
     * @param barcode  the bar code which will be validated
     * @return true if the bar code is not null and the validation is not interrupted
     */
    @Override
    public void validateBarcode(Fragment fragment, Barcode barcode)
            throws BarcodeValidationException, InterruptedException {
        Log.i(TAG, "validating barcode: ".concat(barcode == null ? "null" : barcode.displayValue));
        ((DemoApplication) fragment.getActivity().getApplication()).delay();
        if (barcode == null) {
            // invalidated
            Log.i(TAG, "barcode is null");
            throw new BarcodeValidationException("Null barcode");
        } else {
            // send the scanned bar code to the activity which initiated the QRCodeReaderActivity.
            Intent intent = new Intent();
            intent.putExtra("BARCODE", barcode);
            fragment.getActivity().setResult(Activity.RESULT_OK, intent);
            fragment.getActivity().finish();
        }
    }
}

Note

By default Android provides white color background to SearchView when used inside a toolbar. Because Search icons have white tints applied by default, they may not be visible. Set the SearchView background to be transparent.

---

Last update: November 18, 2021