Icons Area

The icon of an application, which visually communicates its function, will now be shifted from the settings section to the app studio, aligning it more closely with its usage context. The icon storage area serves as a hub for managing all the icons used in apps and templates. Now, when you click on an icon, it will not only take you to its application locations, but also reveal the metadata associated with that asset.

By default, the application icon will display a crossed-out, grey camera symbol. However, incorporating custom icons with unique images can enhance user navigation throughout the site. While it might seem instinctive to maintain uniformity by using the same icon for all apps, deploying a variety of icons actually helps to minimize confusion among different applications. For instance, employing a globe icon for the Locations app can distinctly set it apart, highlighting its unique attributes.

Adding an Icon (outside of the Icons Area)

Setting up an icon can be achieved through two distinct methods: 'Choose Icon' and 'Upload Icon'. If you wish to select an icon that has already been saved or previously used, opt for the 'Choose Icon' method. On the other hand, if you're looking to incorporate a new icon, the 'Upload New' option would be the suitable choice. These options can be found when picking an app icon in the basic app configure area or while creating a template in the template create and edit screen

Choose Icon

When you select 'Choose Icon', a pop-up menu appears, displaying the icons saved on the site in a grid layout. You can select an icon simply by clicking on it and then hitting 'Ok'. However, if you prefer to choose an icon based on its filename, the list layout option—located at the top left—would be more suitable. This approach is especially helpful when navigating through a large number of icons. To swiftly locate a specific icon within a lengthy list, the 'Quick Search' function proves to be a highly effective tool.

Once that is completed, you must select 'Save' to ensure the change has gone through.

Upload Icon

If you select the 'Upload Icon' button, a pop-up menu will appear. You can either manually select the file or use the drag-and-drop functionality to place your file into the designated box. Once the file is selected, its details, including size and dimensions, will be displayed within the pop-up menu. You can also choose whether to rename the file or crop it to better fit its context. Once complete you can then upload, however, please bear in mind that uploading does not equate to saving — so ensure to hit 'save' after the upload process.

You may encounter a problem with selecting the icon which would show a warning symbol in the Icon column. There are two main reasons for this being the dimensions and the size limit. The icon which you choose to use must be a square image where Width equals Height and this can be solved by cropping the image which can also be used to reduce the file size.

Upon selecting to crop an image, a pop-up will appear, featuring a blue square that you can adjust to fit the image properly. After you return to the prior menu, the dimensions should be uniform, and the earlier warning symbol should have been removed. At this point, to finalize your selection, you should click 'Ok'.

If the save has been successful, the Status column should show a green bar with 100% progress indicating the save is completed and you can now click on 'Ok' and then on 'Save'.

Icons Area

To access information about the icons used on the site, navigate to the 'Icons' folder, which houses pertinent details such as the Filename and Size, along with an option to download. For efficient location of specific icons, utilize the search bar indicated below. Additionally, this screen also provides the functionality to upload new icons.

By clicking onto an Icon, it will bring you to a page with two templates, 'Icon Configuration ' and 'Icon Usages'.

Icon Configuration - allows you to change the title/image of the icon and displays some more information about it such as the image type. 

Icon Usages - lets you to identify where a specific icon is being used. This tool is particularly useful for purging unused icons and observing their utilization. By clicking on the button, it will directly navigate you to the corresponding App or Template where the icon is in use.