{"id":5109,"date":"2016-01-06T02:10:23","date_gmt":"2016-01-06T02:10:23","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5109"},"modified":"2017-08-09T03:19:34","modified_gmt":"2017-08-09T03:19:34","slug":"lightning-component-for-wikipedia-search","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","title":{"rendered":"Lightning Component for Wikipedia search"},"content":{"rendered":"<p style=\"text-align: justify;\">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 <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/apps_csp.htm\">Content Security Policy<\/a>\u00a0in Lightning components developer guide.<\/p>\n<p style=\"text-align: justify;\">If we attempt to use AJAX or REST API in Lightning component then below error will be thrown<\/p>\n<blockquote><p>Uncaught error in markup:\/\/ui:keyup : caught Failed to execute &#8216;open&#8217; on &#8216;XMLHttpRequest&#8217;: Refused to connect to &#8216;https:\/\/en.wikipedia.org\/w\/api.php?action=opensearch&amp;search=jitendra&amp;limit=10&amp;namespace=0&amp;format=jsonfm&#8217; because it violates the document&#8217;s Content Security Policy.<\/p><\/blockquote>\n<p style=\"text-align: justify;\">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 <strong>unmanage package<\/strong> from <a href=\"https:\/\/login.salesforce.com\/packaging\/installPackage.apexp?p0=04to0000000Wp8f\">this URL<\/a>.<\/p>\n<figure id=\"attachment_5145\" aria-describedby=\"caption-attachment-5145\" style=\"width: 822px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?ssl=1\" rel=\"attachment wp-att-5145\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5145\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=822%2C615&#038;ssl=1\" alt=\"Salesforce Lightning Component for Wikipedia Search\" width=\"822\" height=\"615\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?w=822&amp;ssl=1 822w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=300%2C224&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=768%2C575&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=624%2C467&amp;ssl=1 624w\" sizes=\"auto, (max-width: 822px) 100vw, 822px\" \/><\/a><figcaption id=\"caption-attachment-5145\" class=\"wp-caption-text\">Salesforce Lightning Component for Wikipedia Search<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/82983e4e47d1ff5e97b7976527d6be9f.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">Above class defines method &#8220;getWikiResponse&#8221; which is annotated by <strong>@AuraEnable<\/strong> 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&#8217;t forget to add &#8220;https:\/\/en.wikipedia.org&#8221; in remote site settings so that Salesforce can connect to external URL.<\/p>\n<p style=\"text-align: justify;\"><span style=\"text-decoration: underline;\">Test Class to fake Http response using\u00a0<strong>HttpCalloutMock\u00a0<\/strong>class.<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/b9ede4702edbdec2720343ad8735fe2f.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">We would be using &#8220;<a href=\"https:\/\/developer.salesforce.com\/lightning\/design-system\">Salesforce Lightning Design System (SLDS)<\/a>&#8221; 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 &#8220;SLDS090&#8221;. We will not be using any library and everything would be pure JavaScript based.<\/p>\n<p><span style=\"text-decoration: underline;\">WikiSearch.cmp<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/de6c3852bda80d2c98adb5c9601929a7.js\"><\/script><\/p>\n<p style=\"text-align: justify;\">Above component implements &#8220;force:appHostable&#8221; to inform Lightning platform that it can be added as a navigation menu in Salesforce1 mobile application.<\/p>\n<p style=\"text-align: justify;\">Interface <strong>flexipage:availableForAllPageTypes<\/strong> means that this component can be added on any record home pagelayout using drag and drop interface of &#8220;Lightning App Builder&#8221;.<\/p>\n<p style=\"text-align: justify;\">We are also using &#8220;svg&#8221; component to display icon in our component. Source code of this component is borrowed from <a href=\"https:\/\/developer.salesforce.com\/trailhead\/project\/slds-lightning-components-workshop\/slds-lc-4\">this trailhead<\/a> module.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/580a567993872970ec2bac3f14434d88.js\"><\/script><\/p>\n<p><strong>Passing parameter to Lightning Component from &#8220;Lightning App Builder<\/strong>&#8221;<\/p>\n<p style=\"text-align: justify;\">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&#8217;s page-layout , its parameter can also be specified at same time.<\/p>\n<p style=\"text-align: justify;\">To set Lightning component parameter from &#8220;App Builder&#8221; we need to use &#8220;Design&#8221; bundle of lightning component.<\/p>\n<p><span style=\"text-decoration: underline;\">WikiSearch.design<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/1689f66c9873484551f43a62672b4226.js\"><\/script><\/p>\n<p><iframe loading=\"lazy\" title=\"Salesforce Lightning - Wikipedia Search Component\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/MXdVHL5cw-k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in Lightning component then below error [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-5109","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5109,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5885,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-spring-17-release-my-favorite-features\/","url_meta":{"origin":5109,"position":1},"title":"Salesforce Spring 17 release &#8211; My favorite features","author":"Jitendra","date":"January 27, 2017","format":false,"excerpt":"List of my favorite features in Salesforce Spring 17","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Apex Batch job - Spring 17","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":5109,"position":2},"title":"Gravatar &#8211; Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":5109,"position":3},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6252,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-path-read-only-lightning-component\/","url_meta":{"origin":5109,"position":4},"title":"Salesforce Path &#8211; Read Only Lightning Component","author":"Jitendra","date":"September 17, 2017","format":false,"excerpt":"Chevron Component build in Lightning with Same look and feel as of Salesforce Path in read only mode","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Read only Path (Chevron) Component in Salesforce Lightning","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Chevron-Lightning-Component-Salesforce.gif?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5987,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-components-on-external-websites-lightning-out\/","url_meta":{"origin":5109,"position":5},"title":"Use Lightning Components on external websites &#8211; Lightning Out","author":"Jitendra","date":"April 5, 2017","format":false,"excerpt":"How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Show Lightning Component in Node.js using Lightning Out","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5109"}],"version-history":[{"count":23,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5109\/revisions"}],"predecessor-version":[{"id":6198,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5109\/revisions\/6198"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}