Fluid Branding - File Attachments Icon

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)

PeopleTools 8.55+ Branding | Conditionally Display Header Icons

The PeopleTools New User Interface (NUI) and Branding has been available for a while and it should not be news to anyone that the system level header appears as shown below.

As we can see, the Branding header provides icons such as Home, Search, Notifications, Actions Menu and Navigator. This is a system wide setting controlled by the application branding configuration/setup. That means these icons will appear on any page/component we navigate to. For example:

What if we want to disable some or all of these icons at a component level?

There is a configuration in the Component - Fluid Properties - Header Toolbar Actions which allows us to disable some or all of these icons.

What if we want to programmatically/conditionally control the visibility of these header icons?

Someone asked me this question in one of posts here. I found that this is very much possible using the delivered (8.55+) PT_PAGE_UTILS API (App Package).

We can simply use the Banner App Class available in the PT_PAGE_UTILS App Package to control the visibility of the header icons in PeopleCode at the page/component level.

PeopleBooks Reference:
Fluid Page Utilities Classes
Banner Class

For example:

Results:

We can see that the 'Home' icon is disabled using PeopleCode on this particular page.

Similarly we can use the following Banner class methods to disable other Branding header icons:
SetVisibilityActionList
SetVisibilityAddto
SetVisibilityHelp
SetVisibilityMyPreferences
SetVisibilityNavbar
SetVisibilityNotifications
SetVisibilitySearch
SetVisibilitySignout

Further, some of these options (Search) are not available via Component - Fluid Properties.

PeopleCode for reference: