Customize "Answer to Question" Page
Hi guys,
I am new to Lithium, and i would like to customize the "Answer to Question" page.
1) I am unable to find the page type of this page to edit in Studio
2) I would like to add a custom component to that page that will trigger an AJAX call to a web service and obtain a JSON/XML feed and render some text/links.
3) Additional "good-to-have" requirement will be to insert a link into the RichText editor upon clicking a link/button that will be rendered from the feed of the custom component.
Any advice on how to achieve the above will be appreciated. Thanks!
Hi puuchyng,
I'm not 100% sure I've got the correct page you are looking for, but I think the page you want to customize is the ReplyPage -- this is page that lets you reply to any message in the community and where you are sent when you click the "answer" button to answer a question in a Q&A board.
As a general rule, you can usually find out what page in Studio maps to a page you are on by either checking the URL of the page, or (since some of our URLs don't have the page name in them, mostly due to the mechanism we have in place to create SEO-friendly URLs) by viewing the source of the page and looking at one of the CSS classes on the <body> element. In the case of the ReplyPage, you'll see that both in the URL (/t5/forums/replypage) and when you view source (the ReplyPage css class on the <body> element). The CSS class on the <body> element is basically an exact match to the page name in studio (we use the upper-camel-case syntax for page names in Studio).
Since the ReplyPage is shared across all board types (such as "forum", "blog", "idea", "qanda", etc. -- we call them "discussions styles", "conversation styles", or "interaction styles", sometimes interchangably) you may only want your customization to appear on Q&A answers -- if that is the case, you can put this around your custom component logic:
<#if page.interactionStyle == "qanda"> <#-- add logic here --> </#if>
(See this page for more information about our "page" freemarker object: http://lithosphere.lithium.com/t5/developers-knowledge-base/Context-objects-for-custom-components-page/ta-p/9331 )
As far as adding a custom component to trigger AJAX calls (or any javascript customization), that should be no problem. The best thing to do would be to create a custom component on the components tab in studio, and use the special <@liaAddScript> freemarker directive we provide to insert the javascript you would like to add to the page into your component. Anything inside the <@liaAddScript> directive will get added to a javascript block that renders near the bottom of the page, after the core Lithium app includes jQuery and adds its own javscript -- this post has an example component that uses the <@liaAddScript> directive to add a "search before post" customization to the message subject field:
By the way, we (somewhat recently) added support for adding rich content to posts (for converting standard URLs into embedded videos, images, and rich article previews -- I believe it's backed by Embed.ly). I think this is still in Open Beta right now -- check out the "Adding Rich Content to Posts (Open Beta)" section in the 13.2 release notes for more information.
Hope that helps! If you have any follow-up questions, please post them here.
Thanks,
-Doug
puuchyng wrote:
3) Additional "good-to-have" requirement will be to insert a link into the RichText editor upon clicking a link/button that will be rendered from the feed of the custom component.
Here's the code I use to insert HTML into the current cursor position in the rich text editor (this doesn't work reliably with some browsers though):
<a class="lia-button lia-button-primary" onMouseDown="tinyMCE.execCommand('mceInsertContent',false,'<a href=\'http://www.skype.com/go/community\'>Skype Community</a> ');">Add Community Link</a>
