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.

8 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) 

Leave a Reply