Skip to content
GitLab
Commit b06c733b authored by Matija Obreza's avatar Matija Obreza
Browse files

Documentation updated

parent af91f42b
Hide whitespace changes
Inline Side-by-side
README.md
View file @ b06c733b
# Enhance your website with data from Genesys
This package allows for embedding Genesys into your website.
This package allows for embedding [Genesys](https://www.genesys-pgr.org) into your website.
The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays data from
`COL003` and `BEL084` in a single website.
## Genesys on your website
## Quickstart
1. Add a few Javascripts to your page:
Add Javascript dependencies to your page:
```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
......@@ -18,26 +18,42 @@ The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays dat
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
```
2. Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>` below:
Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`:
```html
<div class="container-fluid mb-5" id="genesys-container"></div>
<script type="text/javascript">
const APIURL = 'https://api.sandbox.genesys-pgr.org';
const CLIENTID = 'clientid@genesys';
const CLIENTKEY = 'changeme';
const FILTER = { institute: { code: ['ETH013'] } };
genesys.showGenesysUI(document.getElementById('genesys-container'), {
clientId: CLIENTID,
clientKey: CLIENTKEY,
apiUrl: APIURL,
filter: FILTER,
},
queryLang,
);
// Embedded Genesys configuration
const genesysConfig = {
apiUrl: 'https://api.sandbox.genesys-pgr.org',
clientId: 'clientid@genesys',
clientKey: 'changeme',
filter: { institute: { code: ['ETH013'] } },
};
// Detect language from query string
const queryLang = document.location.search && document.location.search.substr(1) || undefined;
// Show UI
genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
// Or, to display ONLY "Collection Overview" use:
// genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
</script>
```
**Note:** Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.
## Configuration options
The `genesysConfig` argument to `showGenesysUI()` is a simple map of various settings you can pass
to *@geneesys-pgr/ui-embedded*:
|Property|Default|Description|
|---|---|---|
|`apiUrl` | *http://localhost:8080* | Production Genesys API is at https://api.genesys-pgr.org<br />Sandbox API is at https://api.sandbox.genesys-pgr.org |
|`clientId` | **Required** | Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.<br />The API keys are limited to your website and will not work on a different domain. |
|`clientSecret` | **Required** | Ditto. |
|`filter` |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |
index.html
View file @ b06c733b
......@@ -19,9 +19,11 @@
<div class="container">
<div class="jumbotron small">
<h1 class="display-6">Embedded Genesys</h1>
<p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code> in a
3rd-party website. The current release of
the Javascript library is available on <a
<p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code>
from <a href="https://www.genesys-pgr.org" target="_blank">Genesys</a> in a 3rd-party website.<br />
<b>Note:</b> The example here is using data from our
<a href="https://sandbox.genesys-pgr.org" target="_blank">test environment</a>.<br />
The current release of the Javascript library is available on <a
href="https://www.npmjs.com/package/@genesys-pgr/ui-embedded">npmjs.com</a>.</p>
</div>
<ul class="nav">
......@@ -56,21 +58,22 @@
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha6/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha6/dist/genesys-ui.js"></script>
<script type="text/javascript">
const APIURL = 'https://api.sandbox.genesys-pgr.org';
const CLIENTID = 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org';
const CLIENTKEY = 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0';
const FILTER = { institute: { code: ['COL003', 'BEL084'] } };
// Embedded Genesys configuration
const genesysConfig = {
apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
clientId: 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org', // Client ID
clientKey: 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0', // Client key
filter: { institute: { code: ['COL003', 'BEL084'] } }, // Genesys data filter
};
// Detect language from query string
const queryLang = document.location.search && document.location.search.substr(1) || undefined;
genesys.showGenesysUI(document.getElementById('genesys-container'), {
clientId: CLIENTID,
clientKey: CLIENTKEY,
apiUrl: APIURL,
filter: FILTER,
},
queryLang,
);
// Show UI
genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
// Or, to display ONLY "Collection Overview" use:
// genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment