Lightning Component for Wikipedia search

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 13 Comments on Lightning Component for Wikipedia search

Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy in Lightning components developer guide.

If we attempt to use AJAX or REST API in Lightning component then below error will be thrown

Uncaught error in markup://ui:keyup : caught Failed to execute ‘open’ on ‘XMLHttpRequest’: Refused to connect to ‘https://en.wikipedia.org/w/api.php?action=opensearch&search=jitendra&limit=10&namespace=0&format=jsonfm’ because it violates the document’s Content Security Policy.

So, other workaround I came up is by using Apex controller to create HttpRequest and return result as JSON to lightning component. You can download this as unmanage package from this URL.

Salesforce Lightning Component for Wikipedia Search
Salesforce Lightning Component for Wikipedia Search

Above class defines method “getWikiResponse” which is annotated by @AuraEnable so that it can be accessed from Lightning component. This method takes two arguments, one text to be searched on Wikipedia and total number of results to be returned. Don’t forget to add “https://en.wikipedia.org” in remote site settings so that Salesforce can connect to external URL.

Test Class to fake Http response using HttpCalloutMock class.

We would be using “Salesforce Lightning Design System (SLDS)” to give our component same look and full as of standard Salesforce lightning component. Download SLDS and save it as a static resource by name “SLDS090”. We will not be using any library and everything would be pure JavaScript based.

WikiSearch.cmp

Above component implements “force:appHostable” to inform Lightning platform that it can be added as a navigation menu in Salesforce1 mobile application.

Interface flexipage:availableForAllPageTypes means that this component can be added on any record home pagelayout using drag and drop interface of “Lightning App Builder”.

We are also using “svg” component to display icon in our component. Source code of this component is borrowed from this trailhead module.

Passing parameter to Lightning Component from “Lightning App Builder

We can configure this component to decide how many results can be returned from Lightning App builder interface. As shown in below video, when we drag and drop component on any record’s page-layout , its parameter can also be specified at same time.

To set Lightning component parameter from “App Builder” we need to use “Design” bundle of lightning component.

WikiSearch.design

Related posts

13 thoughts on “Lightning Component for Wikipedia search”

          1. Can i know where it the changed code is… i still see the same thing that search is not being called

          2. 2 changes. in component, added onlclick method for button. In javascript controller, added a new method and changed how enter button detected. You need to press enter in text box or click on button. Also, make sure remote site setting is added.

          3. Jitendra, This is working for me but when I copy pasted the code there were lot of special characters for example: “<" is coming as "<" and "&" is coming as "&". I am not sure what plugin you are using for code but it has bug.

  1. Hi Jitendra… I couldn’t find this component in the custom component section in the lightning edit page in Account record.
    Is there any settings am missing?

  2. I could not able to run this app.It’s giving me the error: Sorry to interrupt
    This page has an error. You might just need to refresh it.
    Error during init [Cannot read property ‘apply’ of undefined]

  3. Jitendra, Why don’t you update this blog post to remove the illegal characters from the source code? This blog is wasting time for newbies as they are clueless as why they are getting errors.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.