SpreadJS custom shapes are a useful feature that can be implemented in many different types of ways. You can draw shapes to your specifications, and add interactions like highlights, information callouts, or take some database action. In this tutorial, we'll look at how to use custom shapes to create an interactive damage diagram for a car insurance claims application.
With an app like this, users can go to their insurance company's website and fill out a claim by clicking the areas of their cars that have been damaged. This sample includes only the clickable interaction, but you could add a "submit" button to save info to the database, a "clear" button to start over again, or add a login page.
Download the sample (zip)
Step 1: Set up the custom shapes SpreadJS project
We can start by referencing all the required SpreadJS files for this project and initialize some of the variables we'll be using:
Step 2: Add a png of the diagram to the app
Now we'll add the diagram. Basically, we'll be creating shapes on top of this diagram, so your design team can create the png for you.
We'll use the getCellRect function to figure out where we can place the diagram:
Step 3: Add shapes on top of the diagram
For this project, we'll have a separate sheet that defines the location and size of all the shapes in the diagram. This can be done easily, by creating an area, and then setting that array on the sheet:
Once that's defined, we can go ahead and create models for each shape. Since the location and size are defined in the sheet, we can reference those cells. We can also define the shape using an SVG path, which is relative to the top left point of the shape:
Then we can add that shape using the model we just defined:
Step 4: Add interactions to the custom JavaScript shapes
Now that the shapes have been added, we can write some code for changing the color of the shape when the user selects it:
This uses a custom function called getOffset, which is defined as such:
Step 5: Add button shapes to the app
We can add some options so the user can select what type of accident happened. We'll create button shapes and add them to a shape group:
We can also add buttons to select the severity of the accident. The code for this is mostly the same:
We can add some more functionality to the shapes so that the accident type is selected based on which part of the car is selected. To do this, we can add to the shapeClicked function we defined earlier:
Step 6: Add form field shapes
In order to fill out the claim, users need a place to type in their information, so we can create an info section specifically for that:
Step 7: Remove spreadsheet features
Finally, we can remove some of the spreadsheet-like features that the user won't need, such as gridlines and headers:
That's all that's required to make a simple application with custom shapes. Of course, this is only one example; the possibilities of custom shapes in SpreadJS are endless!
Try the car insurance custom shapes demo
Download the sample (zip)
