Forum Discussion

avanvlack's avatar
avanvlack
Guide
14 years ago
Solved

How to Create an API Question/Search Box

Hello!

 

I am trying to create a search widget for our company homepage that will allow the visitors to our site to ask a question and search the community at the same time. I know this is a REST API call, but I am just wondering if anybody can point me in the right direction. I am sure that somebody else has created a box like this before, and I hoping that somebody can point me to a code example.

 

I have uploaded an image to show the kind of functionality that we were looking for...

 

AskAnswerShare.jpg

 

 

  • xorrkaz's avatar
    xorrkaz
    14 years ago

    This might not be what you're going for, but we did a board-level search component that when executed will take the user to the search interface.  The results are specific to the board from which they searched (plus its TKB).  Here is the code:

     

    <div class="lia-panel lia-panel-standard hp-three-column custom-search-widget">
                <div class="lia-decoration-border">
                <div class="lia-decoration-border-top">
                <div> </div>
         </div>
         <div class="lia-decoration-border-content">
                <div>
                <div class="lia-panel-heading-bar-wrapper">
                                <div class="lia-panel-heading-bar">
                                                <span class="lia-panel-heading-bar-title">${text.format("custom.search.title")}</span>
                                </div>
                        </div>
                    <div class="lia-panel-content-wrapper">
                                <div class="lia-panel-content">
<form class="lia-form-all-words-input lia-form-type-text lia-form-input-vertical" id="search_monger_form" method="GET" action="/t5/forums/searchpage/tab/message">
  <input type="hidden" id="search_monger_filter" name="filter" value="location" />
  <input type="hidden" id="search_monger_location" name="location" value="Board:${coreNode.id}" />
  <input style="margin: 0px 5px 0px 5px;" type="text" class="lia-form-type-text search-input lia-search-input-message" name="q" id="search_monger_q" value=""><br/>
  <input style="margin: 5px 0px 0px 5px;" type="submit" class="lia-button lia-button-secondary lia-button-searchForm-action" id="search_monger_submit" name="search_submit" value="Search" />
</form>
                                                                               </div>
                </div>
           </div>
                 </div>
         <div class="lia-decoration-border-bottom">
         <div> </div>
         </div>
      </div>
</div>

     

  • avanvlack's avatar
    avanvlack
    14 years ago

    Thank you for your post! This worked perfectly! Much appreciated!!:)

7 Replies

Sort By
  • avanvlack's avatar
    avanvlack
    Guide
    14 years ago

    Just to clarify... I am not looking for the Ask a Question module that is in studio or a part of the lithium community. I am wondering the best course of action to create a search box for our main website CMS that would post a the form that I create and style to the lithium community and provide the search results that the user provided.

     

    Please Help Point me in the right direction! I must be not using the correct URL in the form post!

     

    If I post to: /t5/community/page.qandaaskexperttaplet.qandaaskexpertform.form.form.form

     

    I get the following error:

    An Unexpected Error has occurred.
    • Sorry, your request failed. A notification has been sent to the development team for investigation.

      Exception ID: 55E52060

      Please click the Back button on your browser.

  • xorrkaz's avatar
    xorrkaz
    Genius
    14 years ago

    This might not be what you're going for, but we did a board-level search component that when executed will take the user to the search interface.  The results are specific to the board from which they searched (plus its TKB).  Here is the code:

     

    <div class="lia-panel lia-panel-standard hp-three-column custom-search-widget">
                <div class="lia-decoration-border">
                <div class="lia-decoration-border-top">
                <div> </div>
         </div>
         <div class="lia-decoration-border-content">
                <div>
                <div class="lia-panel-heading-bar-wrapper">
                                <div class="lia-panel-heading-bar">
                                                <span class="lia-panel-heading-bar-title">${text.format("custom.search.title")}</span>
                                </div>
                        </div>
                    <div class="lia-panel-content-wrapper">
                                <div class="lia-panel-content">
<form class="lia-form-all-words-input lia-form-type-text lia-form-input-vertical" id="search_monger_form" method="GET" action="/t5/forums/searchpage/tab/message">
  <input type="hidden" id="search_monger_filter" name="filter" value="location" />
  <input type="hidden" id="search_monger_location" name="location" value="Board:${coreNode.id}" />
  <input style="margin: 0px 5px 0px 5px;" type="text" class="lia-form-type-text search-input lia-search-input-message" name="q" id="search_monger_q" value=""><br/>
  <input style="margin: 5px 0px 0px 5px;" type="submit" class="lia-button lia-button-secondary lia-button-searchForm-action" id="search_monger_submit" name="search_submit" value="Search" />
</form>
                                                                               </div>
                </div>
           </div>
                 </div>
         <div class="lia-decoration-border-bottom">
         <div> </div>
         </div>
      </div>
</div>

     

  • avanvlack's avatar
    avanvlack
    Guide
    14 years ago

    Thank you for your post! This worked perfectly! Much appreciated!!:)

  • Inactive User's avatar
    Inactive User
    13 years ago

    Is this a viable option for the long term, aka will the t5 url always work? Thanks!

  • AdamN's avatar
    AdamN
    Khoros Oracle
    13 years ago

    If you're worried about the URL changing, there's a context object you can use via FreeMarker to construct the URL. For example, to construct the URL from xorrkaz's code you can use this:

    ${webuisupport.urls.page.name.SearchPage.path("tab","message").build()}

     

     

     

  • irach15's avatar
    irach15
    Maven
    9 years ago

    Hi AdamN,

    How to make a call from a custom component 'Ask a Question' to post new question to a specific board?

    /t5/forums/postpage/board-id/{board.id}

    <form class="lia-form-all-words-input lia-form-type-text lia-form-input-vertical" id="search_monger_form" method="GET" action="${webuisupport.urls.page.name.SearchPage.path("tab","message").build()}">
<input type="hidden" id="search_monger_filter" name="filter" value="location" />
                            <input type="hidden" id="search_monger_location" name="location" value="Board:${coreNode.id}" />
                            <input style="margin: 0px 5px 0px 5px;" type="text" class="lia-form-type-text search-input lia-search-input-message lia-form-subject-input" name="q" id="search_monger_q" value=""><br/>
                            <input style="margin: 5px 0px 0px 5px;" type="submit" class="lia-button lia-button-secondary lia-button-searchForm-action" id="search_monger_submit" name="search_submit" value="Ask a Question" />
                        </form>

    How to update above form parameters to make it work and post a question? I guess it should be POST method, etc...

    Thank you.

  • AdamN's avatar
    AdamN
    Khoros Oracle
    9 years ago

    Hi irach15, are you just asking how to create the URL for a post page? If so, you should be able to use a similar approach. Something along the lines of...

    ${webuisupport.urls.page.name.PostPage.path("board-id","BOARD ID HERE").build()}

    And swap in the appropriate board id.