Back to all discussions

  •   about 5 years ago

Some tips for frontend developer to use the SDK

Dear all,

Recently, our team starts to build the web app, and it seems that the documentation is not well-said about how to initialize the web UI.
And the following tips might help you to initialize the UI as documentation.

1. Use a script tag to load the SDK js file.

2. Declare a tag named 'hcl-sdk' at the desired position in the HTML file.

3. Use another script tag to initialize the SDK.

Well done!!

* Please feel free to add anything to this discussion topic

  • 13 comments

  •   •   almost 5 years ago

    Thanks for sharing, Chun-Hao!

    I am trying to programmatically navigate back to the home screen after directly landing to the Search Near Me page in JavaScript but have no luck.

    Here is a documentation I followed: https://docs.healthcarelocator.com/index.htm#t=QStartGuide%2FCustomize_the_prebuilt_screens_of_the_SDKs.htm&rhsearch=configPatch&rhhlterm=configPatch&rhsyns=%20

    I tried both init and updateConfig apis with { entry: { screenName: "home" } } but it does not seem to work. Have you come across a similar issue?

    Any help would be very appreciated. Thanks in advance!

  •   •   almost 5 years ago

    Sorry to say that I didn't come across that problem. Would you describe all the steps you trying to navigate back to the home screen programmatically or not? Or maybe it is more grateful that you provide a demo on GitHub?

  •   •   almost 5 years ago

    Hi Chun-Hao, Thanks for getting back! I basically first created a customized landing page using the commands below:

    const sdkConfig = {
    apiKey: '',
    appName: 'my_app_name',
    appURL: 'my_app_url',
    entry: {
    screenName: 'searchNearMe',
    specialtyCode: 'SP.WCA.75'
    }
    };

    const HCLSDK = document.querySelector('hcl-sdk');
    HCLSDK.init(sdkConfig);

    // ---------------------

    Then, I used the following command to re-initialize the SDK to re-render to the 'home' view but the SDK is not updated unfortunately :(
    (Note that this works if I re-initialize with a different specialCode with the {screenName: 'searchNearMe'} )

    const homeConfig = {
    apiKey: '',
    appName: 'my_app_name',
    appURL: 'my_app_url',
    entry: {
    screenName: 'home'
    }
    };

    const HCLSDK = document.querySelector('hcl-sdk');
    HCLSDK.init(homeConfig);

    +++++++++++++++++++++++++++++

    Are you aware of any other way to programmatically navigate back to the home screen?
    Thanks!

  •   •   almost 5 years ago

    Okay, I try myself to programmatically route to the default page but failed too. And I just review the source code, I find out that the map-related components seem not to observe the change when you use updateConfig function to modify the entry.

    Another way to programmatically navigate to the home screen is to use basic DOM manipulation to re-initialize the whole hcl-sdk?

  • Manager   •   almost 5 years ago

    Hi Chun-Hao and Nongnooch, thanks for your feedback!

    We just released a fix containing a new method HCLSDK.backToHome() so you can come back programmatically from search near me screen to the home screen.

    It is now available from our CDN:
    https://static.healthcarelocator.com/v1/hcl-sdk-web-ui/hcl-sdk.js
    also from Github repository release/1.0.1 branch:
    https://github.com/hcl-sdk/HealthCareLocatorWebSDK/tree/release/1.0.1

  •   •   almost 5 years ago

    Hi Francois, thank you so much for the update. It is Just In Time! :)

    I just tried out the new method (api.backToHome) in my project from CDN and still have no luck :( Can you please shed some light on this?

    Here is an error stack that I got in the console:

    // --- Source
    const p = HCLSDK.init(curSDKConfig);
    p.then(() => {
    HCLSDK.backToHome();
    });
    // --- Error in Chrome's devtools console
    Uncaught (in promise) TypeError: Cannot read property 'apply' of undefined
    at index-35c440fc.system.js:formatted:1334
    (anonymous) @ index-35c440fc.system.js:formatted:1334
    Promise.then (async)
    value @ index-35c440fc.system.js:formatted:1332
    (anonymous) @ HCLSDK.js:60
    Promise.then (async)
    (anonymous) @ HCLSDK.js:58
    invokePassiveEffectCreate @ react-dom.development.js:23487
    callCallback @ react-dom.development.js:3945
    invokeGuardedCallbackDev @ react-dom.development.js:3994
    invokeGuardedCallback @ react-dom.development.js:4056
    flushPassiveEffectsImpl @ react-dom.development.js:23574
    unstable_runWithPriority @ scheduler.development.js:468
    runWithPriority$1 @ react-dom.development.js:11276
    flushPassiveEffects @ react-dom.development.js:23447
    (anonymous) @ react-dom.development.js:23324
    workLoop @ scheduler.development.js:417
    flushWork @ scheduler.development.js:390
    performWorkUntilDeadline @ scheduler.development.js:157

    // ------------------------

    I debugged this issue a little bit with the pretty print and found that I got an error because 'e' is [] in the following chunk of code after invoking "api.backToHome"

    // --- Source - Pretty Print
    Object.defineProperty(a, n, {
    value: function() {
    var e = [];
    for (var r = 0; r < arguments.length; r++) {
    e[r] = arguments[r]
    }
    var t = Ie(this);
    return t.$onInstancePromise$.then((function() {
    var r;
    return (r = t.$lazyInstance$)[n].apply(r, e)
    }
    ))
    }
    })

  •   •   almost 5 years ago

    Hi Francois, looks like the issue is self-healed today and the api.backToHome api is working now.

    Thank you so much for your help!

  • Manager   •   almost 5 years ago

    Hi Nongnooch,

    Great to hear that it's working fine for you now.

    Just for your information, you do not need to call again the init method, after you got your instance initialized once, you can call the api.backToHome method at any time.
    example:
    document.querySelector('hcl-sdk').backToHome(); // will act on the current instance of the SDK

  •   •   almost 5 years ago

    Thanks for your suggestion, Francois!

    I am embedding the SDK in a react component and the is recreated/rerendered whenever any state is updated.

    In that case, I believe I need to initialize the api whenever my react component is rerendered, am I right?

    Thanks!

  • Manager   •   almost 5 years ago

    Hi Nongnooch,

    You do not have to initialize the SDK each time your component is re-rendered.

    If you are using hooks, you could apply the following way.

    const hclSdkRef = useRef(null);

    useEffect(() => {
      hclSdkRef.current.init(options);
    }, []) // executed one time

    return <div><hcl-sdk ref={hclSdkRef} /></div>

    So, inside any handler you should be able to call hclSdkRef.current.backToHome();

  •   •   almost 5 years ago

    Hi Francois,
    The suggested approach works great! Thank you so much! :)
    +++++++++++++++++++++++++++++
    I also have a use case to update the SDK to searchNearMe by a SpecialistCode that I could not get it to work with api.updateConfig earlier and I needed to initialize the SDK each time I would like to perform this use case.
    However, I noticed that there is a new api 'api.searchNearMe' in the updated cdn. I just tried it out and it works like a charm! :)
    Here is how I use the new api in my app in case anyone is interested:
    // ---------------------
    hclSdkRef.current.searchNearMe({specialtyCode: spCode})
    // ------------
    It would be great if the documentation can update to include a usage of this api as well :)
    https://docs.healthcarelocator.com/index.htm#t=QStartGuide%2FCustomize_the_prebuilt_screens_of_the_SDKs.htm

    +++++++++++++
    There are two more questions I'd like to ask though,

    1) is there any programmatically way to query the current view of the SDK (whether it is a 'home' or 'searchNearMe' view) and the current search value?
    I have a used case where the SDK is initialized to either 'home' or 'searchNearMe' based on the current query parameter with "useEffect(()=>{... }, [])" (Thanks to your suggestion above! :) ) and I also watch for a state with "useEffect(()=>{ ... }, [myState])" in this component to update the SDK view based on a value of myState. I would like to skip the update if the current view and a value in the search box are the same one as the desired SDK state.

    Is this currently doable with the JavaScript SDK through cdn?

    2) Are there any api to reset the current search criteria in SDK?

    Thanks!

  • Manager   •   almost 5 years ago

    Hi Nongnooch,

    Thank you for your great feedbacks. We will update the documentation soon to add the missing method searchNearMe().

    1) There is currently no way to get the current view.
    2) We cannot reset search criteria programmatically.

    The main goal of this first version was to provide a good user experience out of the box, with a cutomizable UI to match with the parent app styles.

    For the next major version, we will add more capabilities (event listeners, action triggers, expose some parts of internal state...). Your feedback very useful for us to understand what's missing. Thanks for that!

  •   •   almost 5 years ago

    No problems! Thanks for sharing this and helping with my (so many) questions, Francois! :)

Comments are closed.