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

Posted

in

by


Related Posts

Comments

14 responses to “Lightning Component for Wikipedia search”

  1. Nisha Avatar
    Nisha

    this is not searching anything.Can you tell me what could be happen?

    1. Jitendra Zaa Avatar

      what error you are getting in browser console ? is wikipedia added in remote site settings ?

      1. keerthi j Avatar
        keerthi j

        Controller is not being called, Search enter doesn’t return any values

        1. Jitendra Zaa Avatar

          Code updated, thanks

          1. keerthi j Avatar
            keerthi j

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

          2. Jitendra Zaa Avatar

            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. Deter Avatar
            Deter

            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.

          4. Jitendra Zaa Avatar

            Thanks Deter, fixed it.

  2. GUHA ANANDH Avatar
    GUHA ANANDH

    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?

  3. sfdc Learning Avatar
    sfdc Learning

    Hi jitendra,

  4. sfdc Learning Avatar
    sfdc Learning

    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]

  5. Deter Avatar
    Deter

    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.

    1. Jitendra Zaa Avatar

      updated, was not aware about illegal characters. All Lex components are here as well – https://github.com/JitendraZaa/LightningExamples

  6. Nana Chen Avatar
    Nana Chen

    Hi, I would like to use this component but I am not a developer and I can’t seem to get it to work after installing the component. Would love to have some advice please. Thank you!

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading