SearchView

API Reference: UI.SearchBar

SearchView is a UI object in which the user can enter a search query and submit a request to the search provider.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

scripts/pages/pageSample.ts
scripts/pages/pageSample.ts
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout from 'sf-core/ui/flexlayout';
import Application from 'sf-core/application';
import SearchView from 'sf-core/ui/searchview';
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
mySearchView: SearchView;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = this;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.mySearchView = new SearchView({
onTextChanged: (searchText) => {
console.log("searched text : " + searchText);
}
});
this.layout.addChild(this.mySearchView, "mySearchView", ".sf-searchView", {
marginLeft: 20,
marginRight: 20,
backgroundColor: "rgba(246,246,246,0)",
borderWidth: 1
});
}

Add SearchView into HeaderBar

A common method of SearchView is to add it into the HeaderBar to save estate on the mobile application.

Since HeaderBar is a special component, it doesn't act like a normal ViewGroup so you can't add SearchView into HeaderBar directly. However, there are other methods to accomplish this task.

Using addToHeaderBar property

API Reference: UI.SearchView.addToHeaderBar

You can use built-in method to natively add your SearchView into the HeaderBar. Since it is a native experience, customization for the views itself is not flexible.

scripts/pages/page1.ts
import Page1Design from 'generated/pages/page1';
import Color from 'sf-core/ui/color';
import SearchView from 'sf-core/ui/searchview';
export default class Page1 extends Page1Design {
router: any;
mySearchView: SearchView;
constructor() {
super();
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.btnNext.onPress = () => {
this.router.push("/pages/page2", { message: "Hello World!" });
}
}
initSearchView(): void {
this.mySearchView = new SearchView();
this.mySearchView.textFieldBorderRadius = 20;
this.mySearchView.textFieldBackgroundColor = Color.WHITE;
this.mySearchView.addToHeaderBar(this);
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
*/
function onShow(superOnShow: () => void) {
superOnShow();
}
/**
* @event onLoad
* This event is called once when page is created.
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.initSearchView();
}

Notice that on Android, the search will be iconified and cannot be un-iconified while using this method.

Cursor Color

Also, notice that the cursor is not entirely visible on iOS. Change that by using UI.SearchView.cursorColor property by:

scripts/pages/page1.ts
initSearchView(): void {
this.mySearchView = new SearchView();
this.mySearchView.textFieldBorderRadius = 20;
this.mySearchView.ios.cursorColor = Color.BLACK;
this.mySearchView.textFieldBackgroundColor = Color.WHITE;
this.mySearchView.addToHeaderBar(this);
}

Changing cursorColor is managed in __applicationAndroidStyle.json for Android. Your assignment will not work on Android as is.

Using titleLayout Method

API Reference: UI.HeaderBar.TitleLayout

Guide Reference: TitleLayout

This method is not encouraged to use. It is better to design your application minding the specifications of the platforms.

If you don't like the native experience or want something custom, you can also use titleLayout for customized SearchView.

The process is the same with adding TitleLayout for anything else. You can refer to the documentation below to apply it properly.