Skip to main content

Developing an Application

 

OutSystems

Use Icons

Icons are small pictograms or symbols to help end-users identify functionality or information on screens. OutSystems provides a built-in collection of icons that can be used on the interface of applications.

To use an icon in mobile apps:

  1. Drag the Icon widget from the widgets toolbox and drop it onto the screen.
  2. Select the icon you want to use and click OK.
  3. Select the icon size.

To use an icon in web apps:

  1. In the Interface tab, go to Rich Widgets and drag an Icon block to the screen.
  2. Expand the dropdown list in the Name property and select the icon to display.

Example in a Mobile App

In GoOut, a mobile application for finding and reviewing places, we want to display icons next to the address and phone number of each place to make it easier for end-users to identify the category of each information.

To add the icons to the information of each place:

  1. Open the PlaceInfo block.
  2. Drag the Icon widget to the left of the expression displaying the address of the place.
  3. Select the home icon.
  4. Drag another Icon widget to the left of the expression displaying the phone number.

Example in a Web App

In the GoOutWeb application, the web version of the GoOut application, we want to display icons next to the phone number and website of a place to help end-users identify the information.

To add the icons to the place details:

  1. Open the PlaceInfoMap block.
  2. In the Interface tab, go to the Rich Widgets, and drag an Icon block to the left of the expression displaying the phone number.
  3. Choose the phone icon from the list in the Name property.
  4. Drag another Icon block to the left of the expression displaying the website.
  5. Expand the dropdown list in the Name property and select the external_link icon.