-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIVRtree.html
238 lines (229 loc) · 9.77 KB
/
IVRtree.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html>
<head>
<title>IVR Tree</title>
<meta name="description" content="An IVR (Interactive Voice Response) diagram showing a call-menu tree with various prompts and responses." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" /> <!-- you don't need to use this -->
<script src="goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ allowCopy: false,
initialContentAlignment: go.Spot.Center,
"draggingTool.dragsTree": true,
"commandHandler.deletesTree": true,
layout:
$(go.TreeLayout,
{ angle: 90 }),
"undoManager.isEnabled": true
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function(e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
var bluegrad = $(go.Brush, "Linear", { 0: "#C4ECFF", 1: "#70D4FF" });
var greengrad = $(go.Brush, "Linear", { 0: "#B1E2A5", 1: "#7AE060" });
// each action is represented by a shape and some text
var actionTemplate =
$(go.Panel, "Horizontal",
$(go.Shape,
{ width: 12, height: 12 },
new go.Binding("figure"),
new go.Binding("fill")
),
$(go.TextBlock,
{ font: "10pt Verdana, sans-serif" },
new go.Binding("text")
)
);
// each regular Node has body consisting of a title followed by a collapsible list of actions,
// controlled by a PanelExpanderButton, with a TreeExpanderButton underneath the body
myDiagram.nodeTemplate = // the default node template
$(go.Node, "Vertical",
{ selectionObjectName: "BODY", deletable: false },
// the main "BODY" consists of a RoundedRectangle surrounding nested Panels
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "Rectangle",
{ fill: bluegrad, stroke: null }
),
$(go.Panel, "Vertical",
{ margin: 3 },
// the title
$(go.TextBlock,
{ stretch: go.GraphObject.Horizontal,
font: "bold 12pt Verdana, sans-serif"
},
new go.Binding("text", "question")
),
// the optional list of actions
$(go.Panel, "Vertical",
{ stretch: go.GraphObject.Horizontal, visible: false }, // not visible unless there is more than one action
new go.Binding("visible", "actions", function(acts) {
return (Array.isArray(acts) && acts.length > 0);
}),
// headered by a label and a PanelExpanderButton inside a Table
$(go.Panel, "Table",
{ stretch: go.GraphObject.Horizontal },
$(go.TextBlock, "Choices",
{ alignment: go.Spot.Left,
font: "10pt Verdana, sans-serif"
}
),
$("PanelExpanderButton", "COLLAPSIBLE", // name of the object to make visible or invisible
{ column: 1, alignment: go.Spot.Right }
)
), // end Table panel
// with the list data bound in the Vertical Panel
$(go.Panel, "Vertical",
{ name: "COLLAPSIBLE", // identify to the PanelExpanderButton
padding: 2,
stretch: go.GraphObject.Horizontal, // take up whole available width
background: "white", // to distinguish from the node's body
defaultAlignment: go.Spot.Left, // thus no need to specify alignment on each element
itemTemplate: actionTemplate // the Panel created for each item in Panel.itemArray
},
new go.Binding("itemArray", "actions") // bind Panel.itemArray to nodedata.actions
) // end action list Vertical Panel
) // end optional Vertical Panel
) // end outer Vertical Panel
), // end "BODY" Auto Panel
$(go.Panel, // this is underneath the "BODY"
{ height: 15 }, // always this height, even if the TreeExpanderButton is not visible
$("TreeExpanderButton")
)
);
// define a second kind of Node:
myDiagram.nodeTemplateMap.add("Terminal",
$(go.Node, "Spot",
{ deletable: false },
$(go.Shape, "Circle",
{ width: 55, height: 55, fill: greengrad, stroke: null }
),
$(go.TextBlock,
{ font: "10pt Verdana, sans-serif" },
new go.Binding("text")
)
)
);
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ deletable: false, corner: 10 },
$(go.Shape,
{ strokeWidth: 2 }
),
$(go.TextBlock, go.Link.OrientUpright,
{ background: "white",
visible: false, // unless the binding sets it to true for a non-empty string
segmentIndex: -2,
segmentOrientation: go.Link.None
},
new go.Binding("text", "answer"),
// hide empty string;
// if the "answer" property is undefined, visible is false due to above default setting
new go.Binding("visible", "answer", function(a) { return (a ? true : false); })
)
);
var nodeDataArray = [
{ key: 1, question: "Greeting",
actions: [
{ text: "Sales", figure: "ElectricalHazard", fill: "blue" },
{ text: "Parts and Services", figure: "FireHazard", fill: "red" },
{ text: "Representative", figure: "IrritationHazard", fill: "yellow" }
]
},
{ key: 2, question: "Sales",
actions: [
{ text: "Compact", figure: "ElectricalHazard", fill: "blue" },
{ text: "Mid-Size", figure: "FireHazard", fill: "red" },
{ text: "Large", figure: "IrritationHazard", fill: "yellow" }
]
},
{ key: 3, question: "Parts and Services",
actions: [
{ text: "Maintenance", figure: "ElectricalHazard", fill: "blue" },
{ text: "Repairs", figure: "FireHazard", fill: "red" },
{ text: "State Inspection", figure: "IrritationHazard", fill: "yellow" }
]
},
{ key: 4, question: "Representative" },
{ key: 5, question: "Compact" },
{ key: 6, question: "Mid-Size" },
{ key: 7, question: "Large",
actions: [
{ text: "SUV", figure: "ElectricalHazard", fill: "blue" },
{ text: "Van", figure: "FireHazard", fill: "red" }
]
},
{ key: 8, question: "Maintenance" },
{ key: 9, question: "Repairs" },
{ key: 10, question: "State Inspection" },
{ key: 11, question: "SUV" },
{ key: 12, question: "Van" },
{ key: 13, category: "Terminal", text: "Susan" },
{ key: 14, category: "Terminal", text: "Eric" },
{ key: 15, category: "Terminal", text: "Steven" },
{ key: 16, category: "Terminal", text: "Tom" },
{ key: 17, category: "Terminal", text: "Emily" },
{ key: 18, category: "Terminal", text: "Tony" },
{ key: 19, category: "Terminal", text: "Ken" },
{ key: 20, category: "Terminal", text: "Rachel" }
];
var linkDataArray = [
{ from: 1, to: 2, answer: 1 },
{ from: 1, to: 3, answer: 2 },
{ from: 1, to: 4, answer: 3 },
{ from: 2, to: 5, answer: 1 },
{ from: 2, to: 6, answer: 2 },
{ from: 2, to: 7, answer: 3 },
{ from: 3, to: 8, answer: 1 },
{ from: 3, to: 9, answer: 2 },
{ from: 3, to: 10, answer: 3 },
{ from: 7, to: 11, answer: 1 },
{ from: 7, to: 12, answer: 2 },
{ from: 5, to: 13 },
{ from: 6, to: 14 },
{ from: 11, to: 15 },
{ from: 12, to: 16 },
{ from: 8, to: 17 },
{ from: 9, to: 18 },
{ from: 10, to: 19 },
{ from: 4, to: 20 }
];
// create the Model with the above data, and assign to the Diagram
myDiagram.model =
$(go.GraphLinksModel,
{ nodeDataArray: nodeDataArray,
linkDataArray: linkDataArray });
}
</script>
</head>
<body onload="init()">
<div id="sample">
<h3>GoJS IVR Tree</h3>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
<p>
An <em>IVR tree</em>, or Interactive Voice Response Tree, is typically used by
automated answering systems to direct calls to the correct party. This particular example
is for a car dealership to route calls.
</p>
<p>
This Interactive Voice Response Tree (IVR tree) has nodes that contain a collapsible list of actions, controlled by a <b>PanelExpanderButton</b>,
with a <b>TreeExpanderButton</b> underneath the body. See the <a href="../intro/buttons.html">Intro page on Buttons</a> for more GoJS button information.
</p>
</div>
</body>
</html>