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 ! 

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!!

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

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.