Skip to Content

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.

/wp-content/uploads/2014/11/iframe_597264.png

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)


/wp-content/uploads/2014/11/rss_597265.png

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

To report this post you need to login first.

28 Comments

You must be Logged on to comment or reply to a post.

  1. Rodrigo Caparroz

    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.

    (0) 
    1. Martin Pankraz Post author

      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.

      /wp-content/uploads/2015/05/rss_css_697067.png

      /wp-content/uploads/2015/05/rss_css_proof_697068.png

      Kind regards

      Martin

      (0) 
    1. Martin Pankraz Post author

      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

      (0) 
  2. Alex Cruickshank

    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

    (0) 
  3. sumit MALOO

    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

    (0) 
    1. Martin Pankraz Post author

      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

      (1) 
      1. sumit MALOO

        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

        (0) 
        1. Darshil shah

          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

           

          (0) 
  4. Christof Hoffmann

    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

     

    (0) 
    1. Martin Pankraz Post author

      Hi Christof,

       

      those components were not yet tested in the new version. Which component are you referring to? RSS or IFrame?

       

      Kind regards

      Martin

      (0) 
    1. Martin Pankraz Post author

      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

      (0) 
      1. Tariq Syed

        Oh ok, in that case I have already installed it (SCN Community Free Extensions) but RSS does not work. Embeddeframe works fine.

        Regards,

        Tariq

        (0) 
        1. Martin Pankraz Post author

           

          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

          (0) 
          1. Tariq Syed

            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

            (0) 
            1. Martin Pankraz Post author

              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

              (0) 
  5. Tariq Syed

     

    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

    (0) 
      1. Tariq Syed

        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

        (0) 
        1. Martin Pankraz Post author

          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

          (0) 
          1. Tariq Syed

            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

            (0) 
            1. Martin Pankraz Post author

              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

              (0) 
              1. Tariq Syed

                 

                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

                (0) 

Leave a Reply