Wow, finally a customizable IFrame and RSS feed Design Studio extension
Dear all,
As part of my first steps with Design Studio I implemented two useful extensions a while ago. Now, I would like to seize the opportunity to raise awareness throughout the community by posting a short entry about their features.
Customizable IFrame
My IFrame component enables you to enrich your Design Studio App with arbitrary web content. It provides a container with default scroll bars and the necessary properties to put in a source URL as well as a custom CSS to shape it according to your specific needs.
Figure 1: IFrame Design Studio view, ConVista example
NewsfeedReader (RSS) using XSLT
The Reader component is capable of displaying every RSS feed you desire. Just specify the source URL and, if you want to, the URL of your style sheet (XSL) for the XSLT processor to extract the transformation rules from. The extension provides a default style sheet for XML-like RSS documents. For reasons of simplicity and easy maintenance, the browser’s internal XSLT engine is used. All current browsers (Chrome, Firefox, IE 10 and 11, Opera and Safari) support it by default. Older versions of IE have not been tested yet. Feel free to do so and inform me of any issues. Please note that external XSL files have to reside under the same domain by design at the moment. Only the feed document will be downloaded from elsewhere. If manipulating the appearance by using CSS isn’t enough for your needs, just modify my default XSL.
Custom CSS files can be applied using the property “Custom CSS URL”. (example url: http://localhost:57003/aad/zen/mimes/YOUR_APP_NAME/test.css)
Figure 2: NewsfeedReader Design Studio view, EEX example
Components can be installed as usual. Just download the ZIP file from my GitHub repository. Source code is available on GitHub too:
https://github.com/MartinPankraz/DesignStudioSDK-Components
RSS feed reader is now also available on the SCN community SDK repository! IFrame has been merged with EmbeddedFrame.
See SCN Design Studio SDK Development Community
Let me know what you guys think, and feel free to ask lots of follow-up questions if you like to make use of my component or just talk about Design Studio’s awesomeness.
Yours
Martin
Hi Martin,
Great components, thank you for sharing!!
Do you have any CSS example to use with the RSS component? I'm trying to format the text but I'm with no success till now.
Thanks and Best Regards,
Rodrigo.
Hi Rodrigo,
I just added some functionality to the component so you can add your custom css to the rss feed. You probably were not able to change anything because the feed is rendered in an iframe. Have another go and let me know if your happy with the approach.
Kind regards
Martin
Hi Martin Pankraz,
Am trying to add custom css style sheet link from internal host. But its not overriding the existing one.
Can you please me in adding the custom css script to format the background and fonts.
Regards,
Akhilesh Kiran.
Hi Akhilesh,
Are you using my version or the SCN one? In general the url leading to the css looks wrong. When assigning a custom css the standard file dialog should pop up. After that the framework takes care of putting the correct urls. The text on the property should read something like <folder>/rss.css.
Maybe you are on an old version?
For the background color change you will need the following on your css:
div[id="feed"] {
background-color: green;
}
Kind regards
Martin
Hi Martin Pankraz,
Thanks for sharing.
Got some knowledge by reading your blog.
Thanks,
Gopinath.
Hi Martin
I have tried to use this component to read the BBC News rss feed, I input the RSS URL but nothing happens? Any ideas what’s going on here?
I can access the RSS.XML from my browser so there’s no connectivity problems that I can see?
If I turn off use Build-In XSL I get an error
Failed to load MIME object 'sdk_include/org.scn.community.basics/res/RSSFeedReader/zen/mimes/sdk_include/org.scn.community.basics/res/RSSFeedReader/rss.xsl'
Thanks
Alex
Hi Alex,
To parse the rss feed I was using the google feed api which is depreacted since december 16 https://developers.google.com/feed/v1/devguide. As a replacement I switched to a Yahoo API. You can update our SDK components from the preview release branch. Use http://org-scn-design-studio-community.github.io/sdkinstall/releases/preview on the installation dialog.
Thanks for finding this bug.
Kind regards
Martin
All working now 🙂
Thanks
Hi Pankraz,
I have a requirement to add WebDynpro screen to design studio application.
This application is used to change user language (available in SU01 Tcode) in backend BW system.
Here logon language selector is WebDynpro screen. After selecting radio button when we hit save button it will call backend code and change user language.
Will it be possible through IFrame Component.
Thanks,
Maloo Sumit
Hi Maloo,
Yes, that should work. Although I wonder why there would be such a requirement because the BO server or the enterprise portal take care of user languages settings themselves. User should use their preferences options instead of using the workaround you describe.
Kind regards
Martin
Hi Pankraz,
Thank you so much for your confirmation.
Here requirement is to change language in backend BW system. So, when user execute BW report from portal he/she should get report data according to the language set against his/her user id.
However if we use preference and change the language, it will change the language of portal components only.
Thanks,
Sumit Maloo
Hi Pankraz,
I used your frame component to in our design studio application and assigned WAD template URL to frame component.
Everything is working fine in development system.
After moving changes to the production system when I try to assign production URL of that WAD template, it is showing blank screen.
I am not getting any WAD report output in frame component.
Is there any issue with frame component?
Thanks,
Darshil Shah
Hi Martin,
there are some issues according Lumia 20 compatibility.
Working in local mode, but script errors running in backend mod (BO Server).
Do you know about the issues. release update?
Thanks
Chris
Hi Christof,
those components were not yet tested in the new version. Which component are you referring to? RSS or IFrame?
Kind regards
Martin
Hi Martin,
I'm trying your RSS feed component in Lumira Designer 2.1 but it's not showing anything.
In one of your replies you provided a link to update, Use http://org-scn-design-studio-community.github.io/sdkinstall/releases/preview It's dead now.
Appreciate if you can point me to a working site.
Regards,
Tariq
Hi Tariq,
I have to admit I haven't tested the component in Lumira 2.1 yet. The update link is not "clickable". You need to put it on the "Install Extensions" screen on your designer (Tools->Install extension). Did you try that already?
Let me know how it goes.
Kind regards
Martin
Oh ok, in that case I have already installed it (SCN Community Free Extensions) but RSS does not work. Embeddeframe works fine.
Regards,
Tariq
One more thing. You are using the old repository for DesignStudio 1.6. I just checked the current state on Lumira 2.1 and the new version does not even show the rss feed reader component.
You need to install the community repository from the following zip file for Lumira 2.1: https://github.com/org-scn-design-studio-community/lumiradesignercommunityext/blob/master/releases/org.scn.community.sdk.extensions.zip?raw=true
I will check the component as soon as I can. Do you have an urgent requirement?
Kind regards
Martin
Hi Martin,
These extensions works flawless on local machine. However when installed on BI-Platform, my Lumira app stopped working.
I am getting below errors, seems like license issue after little bit of google research.
Can you please advice on this? Is there a separate version for server edition?
Highly appreciate your response.
Thanks
Fahad
Hi Tariq,
I just updated the repository I mentioned before. I tested the RSS Feed Reader, which is now available in Lumira 2.1 again, with the following rss feed sucessfully: http://www.tagesschau.de/newsticker.rdf
Let me know if that works for you.
Kind regards
Martin
Hi Martin,
Installed the new component and it is working in Lumira .... thanks 🙂
I was hoping that it would scroll the feed automatically (probably becuase that's how we often see these on websites).
I've inserted your feed component in the footer of a dashboard, i.e., it can only show few lines. Is there a way to hide the scrollbar and instead have it scroll automatically?
Regards,
Tariq
Hi Tariq,
That's good news. Could you elaborate a little on your idea and maybe send me a website with a feed that scrolls automatically? Do you mean hiding the scroller but keep the scrolling function?
As you noticed already the component behaves like a normal container incorporating feed data.
Kind regards
Martin
Hi Tariq,
Could you please tell me steps, you performed to install the extension on Server?
Please see below error on this page i posted, when i installed extension on server.
Hi Martin,
"Auto-scroll" is confusing, I think the correct term is "content ticker" instead of "auto-scroll". For example, scrolling right to left with breaking news or stock market figures.
Here are few a samples
http://preview.codecanyon.net/item/live-news-real-time-news-ticker/full_screen_preview/5569356
The only difference is I want the content to move upwards, instead of right to left, and continues to roll from beginning once reach the last record.
I hope this clears a bit.
Regards,
Tariq
Ah ok, I get it now. That is definitely possible. There are ways to implement this with css animations.
https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative
However I don't know when I will have the time to implement that. How big is your desire for that feature?
Kind regards
Martin
Business requirement is to display latest purchases (consisting both dimensions and key figures) below a preformance dashboard on the large screen. That I can easily implement in a crosstab or scorecard component. But since about 20% of the screen is dedicated for this so I can't display more than 5 records. To overcome that I thought it would be nice if I could have the 20+ records scroll in a loop automatically. I googled for ideas and found out that might be possible with text only. That led me to your RSS feed component, where my thought was to export DS data to a network drive and use that as an RSS feed.
But of course, the optimal solution is to loop DS data directly in a Lumira component. Do you think that is possible?
For now this is a "nice-to-have" feature.
Regards,
Tariq
Hi Tariq,
That sounds interesting and is definitly possible. However I am not sure if we have a SDK component for that on the community yet. Are you willing to create one and contribute?
My first idea would be to have a look at the UI5 feed container. It should be possible to create a databound SDK component for that to achieve what you have in mind.
But I think enhancing my RSS feed reader will be the easier task.
Let me know your thoughts.
Kind regards
Martin
Hi Martin,
I don't think I have the knowledge and experience to create one myself. I'm to new SAP and recently started working with Design Studio/Lumira. Also new to css ... so creating a compotent or enhancing yours might be too challenging for me.
But I will definitly give it a try, thanks fot the tips Martin. I hope it's ok if I come back to you with more questions 🙂
Best regards,
Tariq
Sure, no problem.
I had a quick try to scroll the feed container automatically using jquery method "animate" but I don't like the behavior yet. It is picking up speed for example.
Using css I had some problems with the duration of the animation because css does not know when it reaches the end of the feed to start over.
So far JQuery seems to be the most integrated and straightforward approach.
Kind regards
Martin
Wao! you've already tested JQuery. I googled yesterday and also found several references to JQuery. I'd love to test your development if you want so.
In the meanwhile, I'm going to learn how to build DS extensions 🙂 found some guides/videos on SAP community.
Best regards,
Tariq
Hi Martin,
I have installed above SDK components in Lumira designer 2.2 . In my case embeddedframe & embeddedmedia both working fine but RSS feed reader is not working.
I am trying to use feed reader to read news from CNBC news.
Requirement is to display top news from CNBC in below format.
can you please help
Thanks,
Pallavi