PowerApps Dropdown / ComboBox with Image

Introduction

In this article, we will delve into the integration of images into PowerApps dropdown or comboBox controls. This feature enriches the user experience by incorporating visual elements alongside selectable options, thereby enhancing the application's usability and interactivity.

Steps to Implement Image with Dropdown or ComboBox

• Create a SharePoint list and include items with fields for "Title" and "Attachment". The "Title" field will be used to display text in the dropdown, while the "Attachment" field will hold images to be displayed in the dropdown.

• Connect the SharePoint list created in step 1 as a data source in PowerApps.
• Insert a Combo box and remove the default "Items" property value.
• Configure the "OnSelect" property of the Combo box with the following variable.

  Set(varShowDropdown, !varShowDropdown)

• Add a vertical gallery named "galDropDownVal" and set the created SharePoint list as its data source. Adjust the X and Width properties of the gallery to match those of the Combo box.
• Within the gallery, add an Image control and a Label control.
• Set the Image control's "Image" property to.

  First(ThisItem.Attachments).AbsoluteUri

• Set the Label's "Text" property to.

  ThisItem.Title

• Set the "Visible" property of the gallery "galDropDownVal" to.

  varShowDropdown

  This ensures that the gallery will hide, or show based on the selection of the Combo box control.
• Add the following code to the "OnSelect" property of the gallery "galDropDownVal".

  RemoveIf(selectedStatus, ID = ThisItem.ID);
  ClearCollect(selectedStatus, ThisItem);
  Set(varShowDropdown, false)
  

• To display the selected value from the gallery in the Combo box control, add another blank vertical gallery named "galSelStatus" and position it accordingly.
• Set the "Item" property of the gallery "galSelStatus" to.

  selectedStatus

• Configure the "OnSelect" property of the gallery "galSelStatus" as.

  Set(varShowDropdown, !varShowDropdown)

• Insert an Image, a Label named "lblSelStatus", and a Cancel icon into the gallery "galSelStatus". Configure the properties as follows.

  First(ThisItem.Attachments).AbsoluteUri

• Label's (lblSelStatus) Width Property.

  ThisItem.Title

• Icon's "OnSelect" Property.

   Remove(selectedStatus, ThisItem)

• Icon's "X" Property.

  lblSelStatus.X + lblSelStatus.Width - Self.Width

With these steps, you'll successfully integrate images into PowerApps dropdown or combo box controls, enhancing the user experience and interactivity of your application.

Enjoy Learning!