Challenge: Add URL Parameters

Summary

By completing this challenge you will learn how to:

• Open iModels by passing iModel/Project names in the URL.
• Use URL params to generate shareable links that can emphasize and zoom into elements.

Setup

1. Install the required tools

2. Clone the repo from github

3. npm install

4. npm run build

5. npm run start

6. Head over to the registration dashboard to create some sample iModels.

The app won’t be able to open any iModels as is. You will need to add the functionality to pass iModel and Project name in the URL and then open the iModel.

NOTE: In this case, the iModel and Project name will be the same.

Goals

Goal Follow the instructions to create your own iModel.js web app that can open an iModel by passing in iModel and Project name in URL.

Bonus Modify the app to emphasize and zoom into elements by passing list of element IDs in URL.

Double Bonus Deploy the app by completing the Deploy iModel.js App challenge and generate a shareable link that highlights specific elements.

Solution

The best way to learn is by doing! But, if you want to skip ahead you can go right to the full solution.

Instructions

1. The full instructions are here: Super URLs. All you need to do is follow along with the blog post. You will modify the app to add ability to take in URL params. These will then be used open a specific project/iModel.

Instructions for Bonus

1. See if you can modify the URL to take in a list of element IDs. Then use these IDs to emphasize and zoom into the elements.

   If you need help try these hints.

Hint 1

You can view element IDs by opening the Chrome console (Ctrl+Shift+J) and clicking on an element.

Hint 2

Element IDs can be separated in URL by adding spaces between them. Parse the spaces later to create list of IDs.

Hint 3

API for emphasizing elements.

Hint 4

API for zooming into elements.

1. If you deploy the app: use your new feature to generate shareable links that highlight specific element(s). Maybe you can find something more interesting than the dairy cooler ;)

NOTE: If you share links with a colleague/friend, they will need a CONNECT account to view the iModel. Don’t forget to add them to the project using the registration dashboard!

Conclusion

So, were you up to the challenge? Check out how we solved it by viewing our full solution. Let us know if you have a better way.

Feedback is welcome! Let us know via the iModel.js community.