Search Fields with UI5 1.71

Issue

With UI5 1.71 some search fields do not render correctly. They are missing the background colour, the border, and the delete icon.

The image below shows the issue, with a hard to see "Type of Filter..." area under the tab bar. The following image shows the search field when it is rendered correctly.

The image below shows the search bar rendered correctly.

The same search bar with UI5 1.108 and Horizon theme (as delivered with Neptune DXP22) is shown in the image below. The Horizon theme set's editable fields with a grey background in it's light theme.

The screenshots show the issue with UI5 1.71, a UI5 1.71 screen without the issue, and the issue having been resolved with UI5 1.108 and the Horizon Theme.

Resolution

There are some posts on Neptune forums highlighting this issue, noting that it can be resolved by issuing a JavaScript command to re-display (rerender) the search field. Performing that step produces the correct search field as shown in the second UI5 1.71 image. Performing this on every search field, in every app, with the correct timing (after the right navigation event) is code intensive and would be obsolete on migration to DXP22 with UI5 1.108 and the Horizon theme.

Interestingly the display issue couldn't be resolved with style changes as the base content is different when in is displayed incorrectly.

To resolve, we propose a Neptune DXP Launchpad Enhancement Point. The Enhancement is created in the Neptune Cockpit and then assigned to your Desktop Launchpad(s) and your Mobile Client(s) using UI5 1.71. The Enhancement would be removed on upgrade to DXP22 with UI5 1.108 and the Horizon theme. Depending on your environment the Enhancement could be made directly in your production environment, although for a Mobile Client and app re-build is required as the Enhancement is baked into the static code used to make the mobile application.

In the Enhancement, at the After Startup spot, a new Search Field control is created which performs a double render. The new Search Field control then replaces the standard sap.m.SearchField control so that all applications launched from an enhanced Launchpad will use the double render Search Field.

Create the Launchpad Enhancement

• Open the Neptune Cockpit
• Select the Enhancement Tile

• If you don't have an existing Enhancement create/add a new one. Consider that each Launchpad can only be assigned one Enhancement (which can contain enhancements are multiple spots) when naming the Enhancement.

• Navigate to the Spots tab
• Choose the After Startup enhancement spot and add the following code

console.log("After Startup");

if (typeof sap.m.SearchField.prototype.getZInvalidate !== "function" && typeof sap.ui.core.Configuration.getTheme !== "function") {

  sap.m.SearchField.extend("DoubleRenderSearchField", {
      metadata: {
        properties: {
          zInvalidate: {
            type: "boolean",
            defaultValue: true
          }
        }
      },
      renderer: function(oRm, oControl) {

        var value;

        sap.m.SearchFieldRenderer.render(oRm, oControl);

        value = oControl.getZInvalidate();
        oControl.setZInvalidate(!value);

        if (value) {
          setTimeout(function() {
            oControl.invalidate();
          }, 0);
        }

      }
    });

    sap.m.SearchField = DoubleRenderSearchField;

}

• Activate the Enhancement Spot

• Save the Enhancement and close the Enhancement component.

Add the Enhancement to a LaunchPad / Mobile Client

The next step is to add the Enhancement to a Launchpad or Mobile Client. If you are doing this in your production environment you'll want to create a new test launchpad. Remember that this enhancement will act on all apps launched from the enhanced Launchpad so check all apps that use the sap.m.SearchField control.

• Open Launchpad / Mobile Client
• Select the Enhancement
• Activate the Enhancement
• Save

• Run the Launchpad to test.
• If you are updating a Mobile Client a new app build is required.

• On upgrade to DXP22, UI5 1.108 with Horizon theme remove the sap.m.Search enhancement.
• If testing in a test Launchpad don't forget to enable the enhancement in your main Launchpad(s).

1 Votes