Graphic sb

1. Graphic Voice Page Control Tool
Michael

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

8. Delete

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

16. float

17. float

19. Click the button for edit goto relation
Click for select a voice page item

20. Click button for add exist relation
Highlight for relation
with destination object

21. Drag the arrows for create
relation with the destination
voice page

22. Destination page will be selected button for add relation
Click
in drop down box when clicked with destination object
ship

23. Double click the voice page item

24. for change type Change page number
Click Change page name
Change home page detail of voice page
Copy voice voice page
Delete page
Show