When a business converts raw materials, parts, and components into finished merchandise using manual labor and/or machines, it is called a manufacturing business/unit.
For this vital supply network component to be successful, it should efficiently manage its manufacturing process.
This sample will save information regarding quantities, colors, shipping addresses, progress, etc., but with SpreadJS, you don't have to stop here. Use this Javascript SpreadSheet to record all the information needed to oversee your operation. We will pass over the steps required for a simple Workflow to be created using shapes in SpreadJS, giving you a glimpse of what this component can do.
We will use the SpreadJS conditional formatting features, shapes, and the associated Spread Designer included with the developer license to complete this sample. After that, import the .ssjson file into your JavaScript application to import all the created objects—without writing a single line of code.
Download the sample file to follow along.
Refer to the documentation if you need to install the Designer.
Manufacturing Process Sheet
As a case study, we have a company that sells hand-crafted antique items and craft supplies. These items fall below a wide variety of categories, including jewelry, bags, clothing, décor and furniture, toys, and art. All the items are personalized according to the client's preferences.
This kind of company is chosen since it is easier to separate the whole manufacturing process into independents different processes. We would have the ordering of the product, its design, build and last its shipping.
Below is a table structure that will contain the data related to the products that will have to be manufactured according to the specified orders.
The names of the specified items are entered on the Name column, while on the QTY, the quantity of the items.
The Due Date column will contain the dates when the product is due. We will have a DateTime picker for choosing the dates in the report table for ease of use. DateTime pickers are added by selecting the DateTime Picker on the Cell Dropdowns drop-down (Home tab).
A date picker is a control that lets users quickly enter dates by clicking the cell, and then a Calendar pops up. The user can choose from this calendar the date he intends to assign the cell.
The DateTime Picker will be added on this range of cells: $E$4:$E$11,$E$16:$E$25,$E$30:$E$38.
We can further customize the DateTime Picker object by clicking the (⋮) button located on the right of the Command drop-down. It can be defined, specifying whether to show the time with the year, month and date.
Next, we will add some list drop-downs to specify the statuses of various processes.
First, we select the location of the cells where we will add the drop-downs: $F$16:$H$25, $F$4:$H$11, and $F$30:$H$38.
Then Home tab → Cell Dropdowns → List.
A popup like the one before (DateTime picker) will be shown, but cell Button Command will be listed instead of DateTime picker. We will need to click the (⋮) button located on the right, and the List popup will be shown. We define there the items of the list.
In our case, these items are the statuses: Done, Working on it, Waiting for Approval, and Delayed. SpreadJS allows for the user to add an icon to better represent the item on the list.
Below is the creation of the first item (Done). As an item is selected, a picture shows a green light.
Repeat the same steps for the "Working on It", "Waiting for Approval," and "Delayed" statuses. The following picture shows the drop-down list after having added the items with the icons.
Using conditional formatting, we can color the cells with the correct color as per the chosen status.
- Select the cells.
- In the Home tab, select the Conditional Formatting menu.
- Click New Rule.
- As a rule, type, select "Format only cells that contain".
- For the cell values equal to Done, assign RGB(255, 255, 255) as the text color and RGB(143, 222, 172) as the background color. This is done by clicking the Format button.
Add rules with the same steps for the "Working on It", "Waiting for Approval", and "Delayed" statuses.
Below is the result of adding the conditional formats.
The next thing to do is add the progress bar on the table. We have entered the percentages of completion on the J-column, and in the I-column, we will add the bars. We have separated these displays of information for visualization purposes. That's why we reference the value of the cells from "J" to "I".
To do that, we will follow the below steps, just like in the screenshots.
- On the Home tab, select: Conditional Format → New Rule → Format all cells based on values.
- For the Format Style, select Data Bar.
- Click Show Bar Only and remove the percentage from the cell.
- Select the color of the data bar. In our case, it's RGB(214, 242, 223) for the items and RGB(143, 222, 172) for the totals.
- Click "OK".
The sample allows the user to choose the item's color via a ColorPicker instead of entering a Hexadecimal code. In SpreadJS, ColorPicker is another drop-down list object, so we add it by selecting the range of cells and then Inserting it via the Cell Dropdowns menu (just like we did for the DateTime picker and List drop-down).
The More button (⋮) allows for us to determine the predefined colors that will be in the ColorPicker:
![[paint]](http://cdn.mescius.io/assets/developer/blogs/spread/20211129-javascript-excel-spreadsheet-examples-for-the-manufacturing-industry/13-paint.png)
The result of adding the color drop-downs:
To make the sample more visually presentable, we can add the actual color beside the color-picker. One easy way is to use =HBARSPARKLINE(value, colorScheme?, axisVisible?, barHeight?).
This sparkline is only used to show the color, so we are interested only in the colorScheme variable that would be just like the selected color of the color-picker. If the user has not chosen color, we use "IF" to put blank space.
To apply the change on the other cells, just drag-and-drop.
The following thing to do is add a hyperlink for the orders. In the Order link column, we can enter URL hyperlinks, which opens up a specified webpage when the hyperlink in the worksheet is clicked on. This can be useful if we need to view every piece of paperwork attached to any order located in a specific URL.
- Select the cell, and on the INSERT tab, click Hyperlink.
- Write the text you want to display on the box.
- If we need to underline the word, check the checkbox.
- On the Web Page or File tab, enter the web address.
By completing this step, the view of our sheet will be like below:
Flowchart Sheet
Companies in manufacturing industries tend to use flow charts to help optimize their manufacturing processes by offering a way of achieving continuous process improvement. These workflows, or flow charts, detail the granular activity-level steps that must be completed to create finished goods from raw material and sets of instructions.
They help the team have a visual representation of the process, understand the relationship between steps, and provide information related to possible bottlenecks or even strong features of it, aiding the decision making and any performance evaluation.
This step will show how SpreadJS is used to create a simple manufacturing process workflow and add that in a JavaScript Application.
As a start, we need to conceptualize the flowchart. This is done by analyzing the steps of the workflow. We have separated the process into four major parts logically separated:
- Order: What happens after an order is received
- Design: Since this company's goods are mostly personalized items, each item has different requirements, so the design cant be in bulk
- Build: In this part are shown the processes of building the items after those are designed
- Ship: Includes what happens after a product is built and sent to the storage, invoice generation, and product shipping
Below are a series of steps to add shapes to a sheet and create a flow chart.
In the "Insert" tab, you'll find a "Shapes" drop-down that shows all the available shapes for the user to add:
After having inserted the Shape, SpreadJS allows you to customize it. You can do that by right-clicking and then selecting Format Shape.
On the Designer, after clicking Format Shape, a panel is shown to the right of the sheet, and we can customize the shape. We can assign a color to the shape, a set of properties for the border of that shape, and various other properties like shape size, alignment, position, and movement.
In our case, the shapes contain text inside, and we have added text by either right-clicking the shape and then selecting Edit Text or double-clicking inside the shape. SpreadJS gives the possibility to customize this text.
The Text Options inside the Format Shape panel allow us to do that. We can assign the color of the text, font, or alignment. The screenshot below it is shown how the user can change the text properties.
SpreadJS provides two types of connector shapes used to create connections between different shapes or items. To insert a connector shape click on SpreadJS click on the Insert → Shapes → Lines category. After adding the shape in the Spread instance, we hover over a shape to reach a connection point.
After you click-and-drag, you can see it's automatically going to be drawn for us and connected to the shape, wherever we hover over a point. It's drawn automatically so it doesn't interfere with the shape and its contents. When you release, you can see the result (shown below).
Like basic shapes, even the connector one can be customized. Those can be rotated and resized, and the end-user's ability to be rotated and resized can be constrained.
When selected, the shape has resized handles with which you can adjust the size and a rotate handle with which you can rotate the shape. Colors, shadows, and transparency can be adjusted. See the two screenshots below to see how we changed the color of the connectors, the end arrow type, width of the connector, etc.
The following points are a set of rules used to create the workflow below.
- Rounded rectangles are used to show the START and the END of the process
- Purple "diamonds" are used to show a decision point in the process
- Blue rectangles and blue document and multi-document shapes are used to indicate either ordinary steps of the process or points of the process that use documents
- Blue connector shapes, lines, and elbows are used to link the basic shapes
- We use transparent rectangles with green text to show the possibilities of decision points as we do not have a specified textbox object in SpreadJS. The textbox here is a shape with transparent background
The screenshot gives a graphical view of our company's process to design, build, and ship its goods.
Takeaways
With so much data being stored each year, manufacturing demands great data analytics solutions for the managers to make data-driven decisions.
SpreadJS as a JavaScript spreadsheet component is a general-purpose canvas with a powerful calculation engine, data input, and visualization features that provide the flexibility and familiarity to create ideal solutions for your users.
It has never been easier to have computing power, speed, and countless ways of enhancing your manufacturing dashboards!
If you'd like to learn more about the fantastic opportunities SpreadJS offers, then go ahead and get the free trial.
Contact us to learn more:
us.sales@grapecity.com
Visit the SpreadJS page:
/spreadjs
