Custom HTML Widget

[former_member98944]

Is there any chance we can get a custom HTML widget option? I am a web designer for our company, and I also manage JAM. I would love the ability to add custom designed headers and content.

[former_member98944 · Accepted solution]

Not sure exactly when this was added, but in the text editor within SAP/JAM's editor, there is now a Source Code button. This is exactly what I wanted. I will add one bit of advice. You need to design for mobile first. The SAP/JAM app disregards any CSS you try to apply. So design for that, then add custom CSS to modify your desktop experience.

[former_member47640]

Hi Shaun,

you can do that already by building your own custom OpenSocial gadget.

See here: https://help.sap.com/viewer/c62f9a30d4444b39b1914b90cbeb63ea/LATEST/en-US/934cb92ed2e44e6996dcfa20e0...

and here: https://help.sap.com/viewer/u_collaboration_dev_help/df70ff966aa641aea2424b261ba7c34f.html

[former_member98944]

So to clarify, I can only upload these OpenSocial gadgets as content, profile, group or at the bottom of a page with statusbar?

I'm looking to make custom HTML widgets that I can put on the home page.

For example, I would like the box beside the carousel to be interactive HTML or animated with Javascript. Currently it is just placed image.

Is there a way to get custom HTML as a widget, and not as content?

[former_member47640]

No, when you add OpenSocial gadgets as content gadgets, you can create multiple instances of them as content items in your Jam group (or home page content).

To add it to your overview pages, just select the Tool Content widget. It will allow you to select any of the gadget instances from your content section.

You can try all of this out by enabling one of the OpenSocial gadgets from the Extension Catalog:

https://help.sap.com/viewer/c62f9a30d4444b39b1914b90cbeb63ea/LATEST/en-US/d0bd05d6f02f455d88ef41c263...

[former_member98944]

Yes! Thank you. That is the step I was missing. I was able to get this working.

[former_member98944]

On more question for you on this matter. Does JAM drop all media queries? I have tried linking off to a CSS file and also including the style in the head of my HTML document. Both times all of the CSS works, but media query is missing.

[florian_buech]

shaun-of-the-dead Media queries are supported in the Jam custom header; the easiest way would be including them in the <style> </style> section of your custom header code directly.

As a side note: Especially when you're also planning to use JavaScript libaries like jquery it's important that you've also activated the "Enable JavaScript and all HTML elements for custom header" feature in the >branding >web >custom header configuration in Jam admin.

[former_member98944]

Thanks again for all of your help. I have one more hurdle. I am having trouble getting the dynamic-height to actually work.
If I put a set height, it will stay that height on desktop and mobile. (The HTML and CSS are dynamic, and change sizes correctly outside of JAM). I researched the documentation and added some javascript, but nothing has worked. Please advise. If I can get past this, I can do a lot of interesting things with Jam.

What I've tried: https://help.sap.com/viewer/u_collaboration_dev_help/b177714737e045bbba2eb163e252d66b.html

http://branchtransfer.info/hub/mybranch-home-6.xml

This is the "dummy" code I'm working with. Just trying to get the height to work.

http://branchtransfer.info/hub/mybranch-home-4.xml

This is the code that has the HTML I actually want to display.

Let me know if I can provide anything else that may help find the answer. Thanks!

[florian_buech]

shaun-of-the-dead Thanks for sharing the details here. My recommendation would be building the gadget as before and then building a mechanism using the Jam custom header which automatically resizes iframes (using some libraries available e.g. on GitHub). For this case you don't to run the "URL gadget", as this provides a nested iframe which will make resizing via custom header code very difficult / not possible.

With this approach, you can resize the gadget to full-width usage, dynamic hight / width calculation etc. - always based on the content display in the gadget (i.e. iFrame).

Please note: the custom header feature is not active for the native SAP Jam mobile app, but of course for the mobile browser view (i.e. responsive layout). Certain gadget / scenarios may simply not make sense inside a small mobile app screen and can therefore be optimized for the full-screen browser view?