Arup Sarkar   •   almost 5 years ago

web app

Hi,
I have successfully created the web app based on https://github.com/hcl-sdk/HealthCareLocatorWebSDK/tree/release/1.0.0/examples/web/cdn. Now, how do I override the UI with my custom processes. For example, when I go to the search screen, there is a share icon, in browser it by default it opens a email client, I would like to override it and POST the Physician details (JSON) to another REST end point, how do I do it ?

Even, if I have it to build a custom html page is this https://github.com/hcl-sdk/HealthCareLocatorWebSDK/blob/release/1.0.0/packages/hcl-sdk-api/test.html what you are recommending ?

• 7 comments
• 

  Nongnooch Roongpiboonsopit   •   almost 5 years ago

  Hi Arup, you should be able to make a Service calls to get data without implementing UI by following the instructions below:
  https://docs.healthcarelocator.com/index.htm#t=JavaScript%2FOverview_for_SDK_integration_within_JavaScript_apps.htm

  To find an appropriate query, you can try your query in a GraphQL playground. See the following post for more in fo about the playground:

  https://healthcareappchallenge.devpost.com/forum_topics/35125-retrieve-detailed-location-of-hcp-from-sdk

  HTH!

• 

  Arup Sarkar   •   almost 5 years ago

  Thank you Nongnooch, I quite like the default UI/UX embedded in I want to trigger on the user operations, instead of building from scratch, if I can override any of the button elements of the out of the box UX elements that would be great.

• 

  Francois Barrailla Manager   •   almost 5 years ago

  Hi Arup, there is no public method at the moment to override the default behavior of share HCP details button.
  Thanks to your feedback, we will plan some improvements in the next version to allow such features.

  You still can change the behavior of the share button by editing directly the code of the SDK and build a new version locally.
  Try to edit the "handleShareHCPDetail" method inside https://github.com/hcl-sdk/HealthCareLocatorWebSDK/blob/release/1.0.0/packages/hcl-sdk-web-ui/src/components/ui-kits/hcl-sdk-hcp-full-card/hcl-sdk-hcp-full-card.tsx.
  Then, remove the /examples/web/cdn/hcl-sdk-web-ui and run again the command "yarn start-example-web" from the root of the project.

  Please let me know if you need further support.

• 

  Nongnooch Roongpiboonsopit   •   almost 5 years ago

  Hi Francois, Thanks for sharing! This is very helpful and it would be great if we can programmatically control the UI state based in JS :)

  Along similar lines, I have a use case in my project to programmatically switch to the HomeScreen after init the HCLSDK with the 'searchNearMe' screen but I could not get it to work with nor invoking the 'init' api again nor using the 'updateConfig' api. See more details in my comments in this post:

  https://healthcareappchallenge.devpost.com/forum_topics/35113-some-tips-for-frontend-developer-to-use-the-sdk

  Is this a known issue? Is there any workaround for this? Can you please shed some light on this?

  Note that I am using the SDK from CDN so updating the source code directly and rebuild might not be an option (unless I really need to)

  Thanks in advance!

• 

  Francois Barrailla Manager   •   almost 5 years ago

  Hi Nongnooch,

  Thanks to your feedback, the missing feature is now available on the last version of the web SDK.
  Please check my answer in this post for further information:
  https://healthcareappchallenge.devpost.com/forum_topics/35113-some-tips-for-frontend-developer-to-use-the-sdk

• 

  Chun-Hao Huang   •   almost 5 years ago

  Here I want to provide another perspective to manipulate the elements in the web UI: The web UI will be rendered as a web component, and the developers can access the DOM elements through shadowRoot API. (See the definition of the shadowRoot API here: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)

  However, there might be some efforts to write down the custom UI layout and function through pure DOM manipulation through.

• 

  Francois Barrailla Manager   •   almost 5 years ago

  Hi Chun-Hao,

  The UI SDK is already a web component where the elements are accessible through shadow DOM.

  If you want to create your own UI, you may chose a library or framework rather doing all the DOM manipulation by yourself.
  Also, if you want to use the Healthcare Locator headless (no UI) Javascript library to help you retrieving the data from the API. Please have a look on the documentation here:
  https://docs.healthcarelocator.com/index.htm#t=JavaScript%2FOverview_for_SDK_integration_within_JavaScript_apps.htm

Comments are closed.