logo

NJP

Reusable Custom Display Styles for Service Portal Announcements

Import · Jan 29, 2020 · video

today we're going to take a look at announcements in the service portal and we're going to create a new announcement style then we're going to create an announcement using that a style so first we're going to need to go to an existing announcement or create a new one so in here an application navigator I'm going to type in announcements and now get to that list so I'm going to select one of our existing announcements here and so here we want to look at the display style you're gonna want to create your announcement fill in all the mandatory fields and then here you want to select the lookup list and then we can select new if you've already created your custom and announcement style then you can select it from this list but we're going to create one here so first we're going to give it a name this should be descriptive of the theme or use of the intended style for example light branded style or dark branded style because typically there's a light and a dark version of brands colors sometimes or urgent outage style if you want the style to be used when you have urgent outages that would be another good way to name this so for this particular announcement I'm going to call it the dark branded style because I'm going to have this heavy black background and then the next field we're going to monofilament a crowned color and for the background color you know if you're not sure what colors to use in general for the background or foreground color or creating a new style I would recommend starting with looking at your company's brand colors or a brand guideline if you're not sure other things red is great to convey urgency or importance and you could use a green style to help signify that something is now active or running or working that was previously broken if you're highlighting something like that one other good note is make sure you're using a hexadecimal value or color so I'm gonna add my first one in here and I just notice off the top my head but hexadecimal which means we want to add the pound sign first and then three or six numbers slash letter combo and then if you're not sure what hexadecimal to use or what color or how to get that value you can easily Google online hexadecimal color picker I have that over in a side window over here that I show you in a moment but Google has one it's pretty easy and then once I click away from the window you'll see that I have a block of color representing the value I've set here so if you noticed that the color is wrong it's um you know a color you didn't intend to put there you can see that changed gray once I change that so I'm going to and then we have our foreground color and this is really what color the text and the icon is going to be in the announcement and the background color is what it's going to sit on top of so we're going to want to make sure our background color and our foreground color have enough contrast with that best visibility for example I would not recommend putting a light grey foreground color on a light blue background that would make for a poor user experience you really wouldn't be able to read it so you just want to make sure the contrast is enough you can't really go wrong with a pretty dark background and then using white as the text color or opposite using your brand color for the background that's someone lighter is a tude darker close to black and then using black or closest black from your brand color so in this case I'm just going to use white which I also know off the top of my head and I might have added one too many there and it's actually there but it is white so it matches the background right now and then lastly we have our text alignment left align is the default outer box which is really good for any use case but we also have center align if that better matches your brand so I'm going to Center align just for difference and then now I can continue my styles as I would normally and this is an existing style so I'm just going to update but now I Nate to the front end and I need to trigger this announcement I previously dismissed its announcement I'm just gonna make a few small modifications here so another note and I explained this more in my other video where I go over how to create an announcement from scratch but the display styles are only going to be applicable for the widgets that have display styles turned on so either your banner type but the widget display type does not utilize the brand colors unless you were to switch the announcement widget instance options and I'm going to update this no and you can see we do have our brand colors applied there so this is not configured that way out of box you would need to go to the widget instance options and select use display style on the widget type I'm going to set it back so only our banner takes on the style style updates now I should be able to see my banner with the new style here we are there you go that's how you create a custom announce next aisle for more from cirno solutions feel for you to visit us at Serna solutions comm or contact us of the information on the screen thank you for watching and we hope this cannot be easy

View original source

https://www.youtube.com/watch?v=_o8f8R-x5Sk