A search bar displays a single-line input field in the typical style of a search field. The exact display depends on the iOS version used.

Properties

To show the properties of the Search Bar, click the Properties tab (the slider icon) in the upper right sidebar.

Search Bar

appdoo - Elements - Search Bar (Search Bar)

  • Name
    Here you give the element a name. This name is only used within appdoo. For example, you can quickly see in the outline where each Search Bar is located. You can also edit the name by double-clicking on the Search Bar in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.

  • Text
    If you want the search field to contain text right from the start, enter it in this field.

  • Placeholder
    In this text box, enter the text to be displayed as placeholder text as long as no text has been entered in the search box.

  • Dark Style
    If this checkbox is activated, the background of the Search Bar will be dark and the font bright. Which colors are used depends on the iOS version.

  • Trigger Action While Typing
    As soon as the user of your iOS app presses into the search field, the keyboard is displayed. There is a “Search” button on the keyboard. Only if this button is pressed, the entered search term will be returned. However, if you want to return the entered text when entering it, you have to activate this checkbox.

  • Action
    Here you define the type of action to be executed. You can choose between the following action types:

    • (No Action) (default)

    • Show Screen
      If you select this option, the screen you defined will be displayed when you tap on the button. You can choose between different transitions for the transition from the current screen to the target screen:

      • None (default)
      • Push from Bottom
      • Flip
      • Crossfade

      You can also define here whether data should be transferred to the next screen. If you activate this checkbox, a list of available data sources (e.g. RSS 2.0 Feed, Atom Feed, JSON container etc.) is displayed below. You can select one entry from this list.

    • Go Back
      You select this option if, for example, you want to give the user of your app the possibility to return to the overview from a detail page. In this case it is a good idea to position the button in the upper left corner of the navigation bar.

      However, this option has no effect/function if the user has changed the screens via the Tab Bar.

    • Perform Object Action
      If you select this option, a list of the Object Actions (located in the “Miscellaneous” area) of the current screen is displayed. You can select one entry from this list.

Advanced

appdoo - Elements - Search Bar (Advanced)

  • Hidden
    If you activate this checkbox, your Search Bar will still be present on your work space, but will not be displayed in the app. This can be useful, for example, if you only want to display the search bar under certain circumstances. You can control this via the “Hidden” field in the “Data Links” area.

Geometry

All information about this area can be found on the separate Geometry page.

appdoo - Elements - Search Bar - Geometry

The following properties of the element can be set using the data links:

  • Text
  • Placeholder Text

All information about this area can be found on the separate Data Links page.

appdoo - Elements - Search Bar - Data Links