2. Requirements
1. Ability to download a searchable/read-only version of Voice Site (Ex: Excel, XML, ER Diagram Hendy Putra etc)
2. Show parent pages for a page
3. Error Pop-Up if trying to delete a page that other pages point to
Why graphic tool?
In order to get better user experience, we suggest the graphic tool for solve
those requirements. It has easily operation in UI design, more powerful
expansibility. We can get a directly view of a voice page and easily for download
selected voice pages’ construct Excel, XML, ER Diagram
3. Implementation
Using SVG for create image
Using AJAX for data communication by SB API.
Database Changes
Add an new table for store the relation ship information
and the node of line’s position.
targetPageId destinationPageId domId node1 node2
0ac53296-02- 0ac53296-02-133afe940d6- pageTypeSe M595.4 M695.409
133afe940d6- 9af5e7c2-b95 lection 096767 67675352
9af5e7c2-b95 535219 19,668.71
,668.71
For compatible old voice page, API will be execute in fist time system initialization,
data will be inserted into the table, data is parsed from the voice xml.
And the table will be updated, when relation changed
4. Mockup Work Flow for better understanding what it is
Click for show diagram
Click for choice voice page
5. It will spend a bit time for initialize system and loading
js or image files in frist time
6. Home page and selected page
Drag-able Drag-able
Drag-able
Normal page Double clickpage
Selected for edit
End page
All of relation with selected voice pages will display here with links
9. Maybe we can do following expandable features in future
10. Home page
Minimizecan drag a page item for create
hidewe tool panel
Tool panel, tool panel
Node for change the line’s position
Page comment will popup when mouse over
buttons for print page and save as image or xml file
End the call
11. float
Check out phone number and assign an new one