js-widgets-demo-project's Introduction

JS-Widgets Demo Project

This is an example project illustrating the use of SemLookP's widgets in a plain JavaScript environment. All widgets are created directly inside of index.html. To access the widgets of SemLookP, a bundled javascript output file generated by esbuild in the semlookp-widgets repository is included in this project's js/ folder and embedded in index.html via script tag.

Create SemLookP-widgets in a plain JavaScript environment

To create a widget, an empty container with an id has to be created first. This container can then be addressed in a script tag, where the SemLookP widget can now be rendered into with the respective function added to window['SemLookPWidgets']. Here's an example code snippet:

<head>
    <link rel="stylesheet" href="https://unpkg.com/@elastic/[email protected]/dist/eui_theme_light.css">
    <link rel="stylesheet" href="./css/semlookp_widgets.css/">
    <script type="text/javascript" src="./js/semlookp_widgets.js"></script>
</head>
<body>
    <div id="datacontent_widget"></div>
    <script>
        let widgetContainer = document.getElementById('datacontent_widget');
        window['SemLookPWidgets'].createDataContent(
            {
                api: "https://www.ebi.ac.uk/ols4/api/",
            },
            widgetContainer
        );
    </script>
</body>

Run the project

To run the project, just run the index.html.

Recommend Projects

ts4nfdi / js-widgets-demo-project Goto Github PK