Workflow List

Workflow List is a type of drop-down in SpreadJS, which is defined in JavaScript code as a cell style in the workbook. The developer can specify the items of the list and the items that they transition to when the user selects them. Try selecting different items in the Workflow List in the spreadsheet below to see how the options change.

<p>Dropdowns provide developers the ability to add a drop-down menu with specific properties to cells in a workbook. These drop-down menus don't require any extra code other than simply specifying which one to use for the drop-down menu. </p> <p>SpreadJS now has 8 different kinds of drop-downs, and this demo shows how to use the Workflow List.</p> <p>Before opening the Workflow List, you need to set the options data in cell's style. You can use Workflow List drop-down like the following code :</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// The way of click the dropdown icon to open Workflow List. </span> <span class="hljs-keyword">let</span> style = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Style(); style.cellButtons = [ { <span class="hljs-attr">imageType</span>: GC.Spread.Sheets.ButtonImageType.dropdown, <span class="hljs-attr">command</span>: <span class="hljs-string">"openWorkflowList"</span>, <span class="hljs-attr">useButtonStyle</span>: <span class="hljs-literal">true</span>, } ]; style.dropDowns = [ { <span class="hljs-attr">type</span>: GC.Spread.Sheets.DropDownType.workflowList, <span class="hljs-attr">option</span>: { <span class="hljs-attr">items</span>: [ { <span class="hljs-attr">value</span>: <span class="hljs-string">"New"</span>, <span class="hljs-attr">transitions</span>: [<span class="hljs-number">1</span>] }, { <span class="hljs-attr">value</span>: <span class="hljs-string">"Open"</span>,<span class="hljs-attr">transitions</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">5</span>] }, { <span class="hljs-attr">value</span>: <span class="hljs-string">"In Progress"</span>, <span class="hljs-attr">transitions</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>] }, { <span class="hljs-attr">value</span>: <span class="hljs-string">"Resolved"</span>, <span class="hljs-attr">transitions</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">4</span>] }, { <span class="hljs-attr">value</span>: <span class="hljs-string">"Reopened"</span>,<span class="hljs-attr">transitions</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>] }, { <span class="hljs-attr">value</span>: <span class="hljs-string">"Closed"</span>, <span class="hljs-attr">transitions</span>: [<span class="hljs-number">4</span>] }, ] } } ]; sheet.setText(<span class="hljs-number">4</span>, <span class="hljs-number">4</span>, <span class="hljs-string">"Workflow List"</span>); sheet.setStyle(<span class="hljs-number">5</span>, <span class="hljs-number">4</span>, style); <span class="hljs-comment">// The way just open Workflow List with command rather then clicking the dropdown button.</span> spread.commandManager().execute({<span class="hljs-attr">cmd</span>:<span class="hljs-string">"openWorkflowList"</span>,<span class="hljs-attr">row</span>:<span class="hljs-number">5</span>,<span class="hljs-attr">col</span>:<span class="hljs-number">4</span>,<span class="hljs-attr">sheetName</span>:<span class="hljs-string">"Sheet1"</span>}); </code></pre> <p>The option of Workflow List should follow the structure like this :</p> <pre><code class="hljs js language-js"><span class="hljs-keyword">export</span> interface IWorkFlowOption { <span class="hljs-attr">items</span>: IWorkFlowItem[]; } <span class="hljs-keyword">export</span> interface IWorkFlowItem { <span class="hljs-attr">value</span>: string; transitions: number[]|string[]; } </code></pre>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); // -------------------- WorkFlow --------------------- let style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openWorkflowList", useButtonStyle: true, } ]; style.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.workflowList, option: { items: [ { value: "New", transitions: [1] }, { value: "Open",transitions: [0,2,3,5] }, { value: "In Progress", transitions: [1, 3, 5] }, { value: "Resolved", transitions: [5, 4] }, { value: "Reopened",transitions: [5, 3, 2] }, { value: "Closed", transitions: [4] }, ] } } ]; sheet.setText(4, 4, "Workflow List"); sheet.setStyle(5, 4, style); sheet.resumePaint(); spread.commandManager().execute({cmd:"openWorkflowList",row:5,col:4,sheetName:"Sheet1"}); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }