Appbuilder with Viewer API

Grasshopper ShapeDiver
,
1

I have an application created with AppBuilder in Grasshopper. However, I need to add interaction (for example, drag). But when I use the Viewer API for this, all my settings made in AppBuilder are naturally reset. I have to programmatically build the interface, display parameters, etc.
My question is: how can I combine these approaches and add interaction to an already created application?

2

Could you give further context so I can better understand your situation?
How are you embedding your App in your website?

At the moment, Apps need to be embedded using iframes, as explained here. If you are using the viewer API, the canvas will only include the viewer, and you need to build UI around it yourself. This is true for standard ShapeDiver models, as well as with ones using the viewer API.

3

Thanks Mathieu,
Is there a way so you don’t have to start from scratch, but somehow start with the base already from the app builder or the standard models and only tweak specific things with the viewer API?

4

We conceived App Builder as a best practice codebase for using ShapeDiver with React. That’s still the case, and the App Builder SDK (the code of the App Builder web application) is open source. It’s a perfect starting point, should you create a custom React application using ShapeDiver. We have purposefully split the code into two repositories:

  • The shared code repo called AppBuilderShared contains code to be shared between different deployments of App Builder.
  • The main repo called AppBuilderSdk uses AppBuilderShared as a git submodule and contains just a few lines of code to define the React application.

This provides you with several possibilities:

  • Create forks with little maintenance cost by integrating the shared code we maintain as a git submodule. For example, this is how we maintain the integration of iJewel3D into App Builder using as little duplicate code as possible. See the code here.
  • You can fork everything. However, this comes at a higher maintenance cost because integrating the updates we steadily develop will require more work on your end.
  • Fork everything, develop a new feature, issue a pull request, let us review it, and have your feature integrated into the main App Builder distribution (which means we take over maintenance).
  • For the ones who are starting a React app from scratch, cherry-picking parts of the shared code is particularly useful for the state management code of sessions and parameters.