Now Mobile banner, with link (media item)

[Mark Roethof]

Hi there,

Enhancing the experience of the Now Mobile "Homepage" Applet Launcher, wouldn't it be awesome to add a banner? Let's get after it 🙂

Concerning Mobile, a lot can be done in both Studio and Platform UI. You will also quickly feel the crazy mixture of several different scoped applications. Or at least it feels crazy 🙂 For this article, I tried to stuck with only the Platform UI.

Applet Launcher

Out-of-the-box there is an Applet Launcher for the homepage, "Homepage" 🙂 On this one, we need to tie a new Applet Launcher Section which references the Artifacts for the banner. Navigate to "System Mobile > Applet Launcher". The Applet Launcher Section is under the "Body" section. Just double click the Insert new row..., add an order (for example 100), and create a new Section.

When creating a new Mobile Section, a pop-up concerning the Section Type appears. "Media Section" would be our choice.

On the Media Section, most import is the banner image which you would add as an attachment to the new Media Section. After adding the attachment and selecting Type "Image", you would be able to select this in the Image field.

We also marked the Function instance field, we'll come back at that later.

Add a URL

The banner which we've just added is just will already be visible on the Now Mobile app, though it's just a plain image at this moment. To add a URL we would have to create a Function which we could attach to a Function instance. The Function instance which we saw earlier in this article.

To add a Function, navigate to "System Mobile > Functions". Create a new function with Type is "URL" and Context is "Global".

Ones the Function has been set up, we could go back to our create Media Section and add a new Function instance. On the Function instance select Parent table "Applet Launcher", the created Function, Location "Media section", and lastly Parent "Applet Launcher: Homepage".

Result

With this, when opening (or refreshing) your Now Mobile app, the banner will be visible on the Now Mobile homepage! The banner would also be clickable and will open a URL.

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

👍	If this post helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more articles, blogs, videos, and Share projects on Now Mobile app I published? - Now Mobile app

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn

[Mark Roethof]

.

[Mark Roethof]

.

[Mark Roethof]

.

[David Ha]

This is a great tutorial on media section! 

Thanks Mark!

[soniya R1]

This thread was truly very helpful,

The only question I have is that, is there a possibility where I can have this banner visible for a specific location of users ? 

What Have I done -
I see a Visibility section on Media Section.

I can choose a table[sys_user] & field[Location] > condition configuration for visibility 

Above condition doesn't work 😞

Kindly suggest on this configuration! Thanks in Advance 🙂

[David Ha]

Hi soniya95,

The visibility condition should hide it from users where conditions does not apply. If you are not finding it working as expected -- please open a ticket/case so a technical support agent can take a closer look into this unexpected behavior.

Thanks,
David

[grep]

Mark sorry for disturbing , but wanted to know how can I put home tab url on the Function where you have used  https://handstedhammers.nl  .

Can you guide where to pick url from incase of Mobile , lets say I put the banner in all the tabs then on the click of it , it should take me to hometab in NOw mobile .

[grep]

Hi Mark ,

Thanks a lot for this wonderful blog . I appreciate all the efforts you have put in achieveing this . Keep writing blogs like this ... Cheers!!!

[Mark Roethof]

.

[Gioia1]

Really cool, thanks a lot!

[Oliver13]

Hi Mark,

Thank you for sharing but I have a question. What size of the image it should be? I tried a few times but it was only showing the middle part of the image. 

Thank you.

[PaulSylo]

Usually go for 600 * 160. it works for both IOS/Andriod