Search Bar

A search bar allows users to search values by typing text into a field. 
Component's Property info for iOS/Android
iOS
Android
It's calledSearchBar in Swift language. It can have 2 properties on Monday Hero: 

Text: The initial text displayed by the text field. You can specify the text as a plain string or as an attributed string.
Placeholder: A placeholder is a text displayed by the SearchBar when the string is empty. Typing any text into the text field hides this string. 
Searchbar is calledsearchViewin Android and has hintproperty on Monday Hero.
⚠️This feature is available in only Mac App. Web App support for Android is coming soon.
If you need to install the desktop app, click here.​

Hint: A hint is a text displayed by the searchView when the string is empty. Typing any text into the text field hides this string. It's called the placeholder in iOS.
Generated iOS/Android Code
Let's see the generated code. Monday Hero will generate it even the rectangle's cornerRadius value included.
iOS
Android
1
//HomePageViewController.swift 
2
import UIKit
3
​
4
class HomePageViewController: UIViewController {
5
​
6
//Connection from an Interface Builder to a UI component
7
@IBOutlet private weak var searchSongSearchBar: UISearchBar!
8
​
9
	override func viewDidLoad() {
10
		super.viewDidLoad()
11
		setupViews()
12
	}
13
}
14
​
15
extension HomePageViewController {
16
	private func setupViews() {
17
	
18
		//SearchBar properties
19
		searchSongSearchBar.layer.cornerRadius = 10
20
		searchSongSearchBar.layer.masksToBounds =  true 
21
		searchSongSearchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
22
		searchSongSearchBar.placeholder = NSLocalizedString("search", comment: "")
23
		if let placeholderInsidesearchSongSearchBar = searchSongSearchBar.value(forKey: "searchField") as? UITextField {
24
					placeholderInsidesearchSongSearchBar.textColor = UIColor.flint
25
					placeholderInsidesearchSongSearchBar.font = UIFont.textStyle
26
					placeholderInsidesearchSongSearchBar.textAlignment = .left 
27
		}
28
	}
29
}	
Copied!
1
<!--activitySongList.xml-->
2
<SearchView
3
	android:id="@+id/songSearchView"
4
	android:layout_width="0dp"
5
	android:layout_height="wrap_content"
6
	android:iconifiedByDefault="false"
7
	android:queryBackground="@android:color/transparent"
8
	android:queryHint="@string/search"
9
	android:textAlignment="textStart"
10
	android:textColor="?attr/flint"
11
	android:layout_marginStart="20dp"
12
	android:layout_marginEnd="19dp"
13
	android:layout_marginBottom="8dp"
14
	app:layout_constraintStart_toStartOf="parent"
15
	app:layout_constraintEnd_toEndOf="parent"
16
	app:layout_constraintTop_toBottomOf="@+id/descriptionTextView"
17
	app:layout_constraintBottom_toTopOf="@+id/itemBackgroundView"/>
Copied!

Status Bar

List

Last modified 1yr ago

Copy link

Contents

Component's Property info for iOS/Android

Generated iOS/Android Code