Replicate record search criteria with magnifying glass

It's not ideal but you can use a Unicode value to insert the relevant symbol into the 'Placeholder' attribute of a text box:

char(128269) & " Search Course by name or id"

It's a bit cartoony which is why it's not ideal imo.

natashan0002,

You probably cannot place that icon inside the text field, (unless you try something what Stewart has suggested above)

I believe the nearest you could do is to put the icon and text field side by side

something like this 

a!sideBySideLayout(
  alignVertical: "MIDDLE",
  items: {
    a!sideBySideItem(
      width: "MINIMIZE",
      item: a!richTextDisplayField(
        value: a!richTextIcon(
          icon: "search",
          color: "SECONDARY",
          size: "MEDIUM"
        )
      )
    ),
    a!sideBySideItem(
      item: a!textField(
        placeholder: "Search course by name or id"
      )
    )
  }
)

Hope it helps ! 

That looks WAY better imo!!

Thats what i want But the search icon is coming in blue. 

Yes that is good. But i was thinking the above one is also done with appian so there will be a way to replicate it. 

Also the search icon vanishes if i start typing as i use it as a placeholder. So i used char(128269) as label . I think this what i want(other than the blue icon). Is there any way to use the svg pic or site url  in the label?

yea, one more alternative

a!cardLayout(
  shape: "SEMI_ROUNDED",
  padding: "NONE",
  contents: a!sideBySideLayout(
    alignVertical: "MIDDLE",
    items: {
      a!sideBySideItem(
        width: "MINIMIZE",
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            "  ",
            a!richTextIcon(
              icon: "search",
              color: "SECONDARY",
              size: "MEDIUM"
            )
          }
        )
      ),
      a!sideBySideItem(
        item: a!textField(
          labelPosition: "COLLAPSED",
          placeholder: "Search course by name or id"
        )
      )
    }
  )
)

The content of a text field that appears as defined in the ;'Placeholder' attribute is designed to disappear as soon as you start typing into the field - this is the expected behaviour.

natashan0002 said:

Yes that is good. But i was thinking the above one is also done with appian so there will be a way to replicate it. 

No, unfortunately some of the features used in the Appian UI are just for Appian, despite how nice it would be if they'd make them into designer-usable components as well (maybe someday, hopefully).

Yes Hopefully.