Replicate record search criteria with magnifying glass

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 ! 

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. 

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"
        )
      )
    }
  )
)

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"
        )
      )
    }
  )
)