zAPIness-search-widget

A search widget that allows users to search a given zAPIness endpoint set up in https://app.zapiness.com/. See Demo

Desktop

Mobile

---

Basic Usage

zAPIness-search-widget will be loaded in any webpage by embedding the following javascripts into the page:

<script type="text/javascript">
  var script = document.createElement('script');
  script.src = "https://govwizely.github.io/zAPIness-search-widget/static/js/main.js";
  document.getElementsByTagName('head')[0].appendChild(script);

  window.onload = function() {
    // Initiate the search widget with endpoint
    zAPI.SearchWidget.new({
      mountPoint: "#zAPI-sw-root",
      host: "https://rrsoft4.zapiness.xyz",
      endpoint: "sample_api",
      fields: [
        "agency",
        "description",
        "end_date",
        "supplier_name",
        "supplier_country",
        "supplier_city"
      ]
    });
  }
</script>

---

Configurations

Key	Default Value	Required	Description
mountPoint	-	true	Selector of the div to embed on the page. The app will create the div with the id(mountPoint) if none is found on the page
host	-	true	Host of your endpoint from zAPIness app
endpoint	-	true	Name of your endpoint
label	First element of the aggregations	false	The main title you want to show in the search result, i.e AusAid in the screenshot above
fields	-	false	By default, it will show all searchable fields from the endpoint. You may set the fields you want to show in the search result
preview	false	false	perform a search during initialization and show all the details of the first result
showAll	true	false	show all fields in the search results
showSearchBar	true	false	show search bar

---

Features

• Search with Keyword: Perform search when users type
• Additional Filters: Allow user to add filters on the search
• Customization fields to be shown in the search results
• Basic Pagination
• Smart Select in Advanced Filter: Search for the most relevant keyword while you type
• Customizable View: Able to hide the search bar by setting showSearchBar flag to false

---

Development Setup

git clone [repo]
npm install
npm start

To setup endpoint, go to https://app.zapiness.com/.

---

Development Notes

• Get JS minified file:npm run build
• Run test: npm run test
• Run tests without cache: npm run test --no-cache
• Run ESLint: npm run lint
• Deploy to GH Page(optional): npm run deploy

---

Troubleshooting

Snapshot Tests fails

Snapshot Test aims to capture the latest html generated by the component. If the component is changed, it is expected that the snapshot file should be updated as well. To update the snapshot, run npm install jest-cli -g and jest --updateSnapshot

Search Widget does not search on the page after embedding the codes

Ideally, mountPoint parameter will take care of creating the div element with the given id. If the search widget does not show up, manually insert a div with the desirable id on the page.