graphic sb

Graphic Voice Page Control Tool

Michael

In order to get better user experience, we suggest the graphic tool for solve those requirements. It has easily operation in UI design, more powerfulexpansibility. We can get a directly view of a voice page and easily for download selected voice pages’ construct Excel, XML, ER Diagram

Why graphic tool?

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 page3. Error Pop-Up if trying to delete a page that other pages point to

Implementation

Using SVG for create image Using AJAX for data communication by SB API.

Database Changes

targetPageId destinationPageId domId node1 node2

0ac53296-02-133afe940d6-9af5e7c2-b95

0ac53296-02-133afe940d6-9af5e7c2-b95

pageTypeSelection

M595.4096767535219,668.71

M695.4096767535219,668.71

Add an new table for store the relation ship informationand the node of line’s position.

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

Mockup Work Flow for better understanding what it is

Click for choice voice page

Click for show diagram

It will spend a bit time for initialize system and loading js or image files in frist time

Drag-ableDrag-able

Double click for editDrag-able

Home page and selected page

End page

Normal page Selected page

All of relation with selected voice pages will display here with links

Delete

Maybe we can do following expandable features in future

Tool panel, we can drag a page item for create

buttons for print page and save as image or xml file

Minimize tool panelhide tool panel

Node for change the line’s position

Home page

End the call

Page comment will popup when mouse over

Check out phone number and assign an new onefloat

float

float

Click for select a voice page item

Click the button for edit goto relation

Highlight for exist relationClick button for add relation with destination object

Drag the arrows for create relation with the destination voice page

Click button for add relation ship with destination object

Destination page will be selected in drop down box when clicked

Double click the voice page item

Click for change typeChange page nameChange page number

Change home pageCopy voice pageDelete voice pageShow detail of voice page