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.

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