hyper-sdk/feature_showcase/5_Search.html at master · MicroStrategy/hyper-sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hyper Web SDK Demo</title>
    <script type="text/javascript" src="https://demo.microstrategy.com/hypersdk/js/mstr_hyper.bundle.js"></script>

    <!-- This is for the jsfiddle button. You don't need it in your application.  -->
    <script type="text/javascript" src="js/jsfiddle.js"></script>
</head>

<body>

    <p style="border: 2px; border-style: dotted; border-color: red">You can use search api to insert Hyper Card into
        your interface. </p>
    <script type="text/javascript">

        document.addEventListener("DOMContentLoaded", function () {
            mstrHyper.start({
                server: "https://demo.microstrategy.com/MicroStrategyLibrary",
                auth: {
                    authMode: mstrHyper.AUTH_MODES.GUEST
                },
                searchEnabled: true,
            })

            var options = {};

            //Add search callback
            options.searching = {
                onSearch: (searchResults, searchId) => {
                    console.log('This is onSearch callback!')
                }
            }

            mstrHyper.enableSearch(options)


        });

        async function search() {
            keyword = document.getElementById("searchKeyword").value;

            // var {searchId, searchResults} = await mstrHyper.searchKeyword(keyword, document.getElementById("IFrame"));

            var { searchId, searchResults } = await mstrHyper.searchKeyword(keyword);

            var mergedSearchResults = await mstrHyper.mergeSearchResults(searchResults);
            var card = mergedSearchResults.primaryResults[0];
            var searchResultDiv = document.getElementById("searchResult")
            mstrHyper.showCard({ cardUID: card.cardSetId, elementId: card.ref, nodeToRenderTo: searchResultDiv });
        };


    </script>


    <p>Apple</p>
    <p>Strategy</p>
    <input type="text" id="searchKeyword"></input>
    <input type="submit" onclick="search()" value="Submit">
    <br />
    <p> Search Results:</p>
    <div id="searchResult" style="border-style:dashed; border-color:red;width: 400px;min-height: 800px;display: flex;">
    </div>
</body>

</html>