Forum Discussion

Gursimrat's avatar
Gursimrat
Leader
11 years ago

Passing parameter from custom component to an endpoint

I am calling an endpoint from a custom component where my requirement is as below:

 

From a text box, when a user types a query (a string), it will need to be passed in a REST call which will fetch the results based on the correct call.

 

Below is the custom component code:

<#assign kb_endpoint_url = "/plugins/custom/community-name/community-name/endpointname" />
<@liaAddScript>
(function($) {
$(document).ready(function() {

function callLithiumEndpoint() {

$('.my-div').hide();



var jqxhr = $.get("${kb_endpoint_url}", { search_query: "general"} function(data) {
console.log("success"); 
//alert(data); 
$('.my-div').prepend(data); 
})
.done(function() { console.log("second success"); })
.fail(function() { console.log("error"); })
.always(function() { console.log("finished"); $('.my-div').show(); }); 
} 
callLithiumEndpoint();
});
})(LITHIUM.jQuery);
</@liaAddScript>

<div class="my-div">

</div>

 Below is the Endpoint code:

<#assign search_query = I_NEED_TO_GET_THE_VALUE_FROM_CUSTOM_COMPONENT_HERE>
<#assign response =  http.client.request("https", "abc@gmail.com:pass123@xyz.zendesk.com","/api/v2/search.json?query=%5C%22${search_query}%5C%22").get() />
<#if response.hasError>
${response.error.message}
<#else>
${response.content}
</#if>

 

Thanks

  • dhiraj_gophane's avatar
    dhiraj_gophane
    11 years ago
    In reference to my last Comment,
    You can accept the parameter in endpoint as,

    <#assign search_query = http.request.parameters.name.get("QueryParameter","") />
  • AdamN's avatar
    AdamN
    Khoros Oracle
    11 years ago

    Hi Gursimrat,

     

    I'd suggest taking a look at the http.request context object:

    http://lithosphere.lithium.com/t5/developers-knowledge-base/http-request-FreeMarker-context-object/ta-p/9323

     

    It has numerous methods for dealing with the request, including a method for getting parameters from the request. This article has an example of an endpoint that pulls in a parameter:

    http://lithosphere.lithium.com/t5/developers-knowledge-base/Using-Endpoints-to-Condense-REST-API-Requests/ta-p/88908

     

    I hope this helps!

    • Gursimrat's avatar
      Gursimrat
      Leader
      11 years ago

      Hi AdamN 

       

      Thanks for your response, i am halfway in which I am able to pass the value to the endpoint via custom component, but I am somehow not able to use it inside the endpoint. Below is the change I made to the endpoint code after your suggestion.

       

      Endpoint:

       

      <#compress>

<#assign search_query = http.request.parameters.name.get("query", "")>

	<#attempt>

<#assign response =  http.client.request("https", "abc:xyz@123.zendesk.com","/api/v2/search.json?query=%5C%22${search_query}%5C%22").get() />

	<#recover>
		<!-- Something -->
	</#attempt>

</#compress>

       

      Custom Component Code to pass the value to the parameter

       

      $.get( "${kb_endpoint_url}", { search_query : queryValue } )// where queryValue is being passed from a text box
  .done(function( data ) {...

       

      When I checked in the firebug, the request was a Success but returened below reponse:

       

      Uncaught TypeError: Cannot read property 'results' of null 

       

      Do you find any loops here?

      • NicoB's avatar
        NicoB
        Lithium Alumni (Retired)
        11 years ago

        Hi Gursimrat 

        can you try to replace the URL with this?

         

         

        <#assign response =  http.client.request("https", "abc:xyz@123.zendesk.com","/api/v2/search.json?query='${search_query}'").get() />

        I think the issue is that the http.client is always trying to encode your URL so if you specify an encoded query you will get a double encoded one :)

         

        This is just a guess though..

         

        Thanks,

        Nico

  • dhiraj_gophane's avatar
    dhiraj_gophane
    Leader
    11 years ago

    Hi,

    May be you can try following snippet.

     

    <#assign searchQuery = http.request.parameters.name.get( "q", "") />

    function callEndpoint(searchQuery){


    $.ajax({
    type: "GET",
    async: false,
    url: "<endpoint url goes here>?QueryParameter=" + searchQuery ,
    success: function(data) {
    assignResponse(data);
    }
    });
    }

     

    You need to accept the QueryParameter in endpoint and do the rest api call to fetch results.

    and generate a response which you can process in custom component as "data".