Javascript Workflow Webpage

Workflow page: All colors, fonts, backgrounds and images to this site will be interchangeable. Header: Workflow Page should be created using Javascript. 1st Line of header – should accommodate a logo and description of logo on the Left hand side with option to populate information on the right. Logo and description TBD. 2nd line of header – Should be a menu bar with drop down option for menus. Although the menu will be a future enhancement they should be placed in for visualization. 3rd line of header – should be a tab placement with the default of “Workflow”. These tabs will be populated as below and recorded as advised from Programmer. Body: The workflow page body should contain a narrow window on the left and a larger(canvas) window on the right. All Icons will be aranged in order as follows: “Data Input”,“Processing””Design””Output””Soap”. They can be dragged to the right window or canvas. When placing Icons on the canvas they should have the option to be linked to one another by Selecting one and dragging to another and locking the line into place. Icons with multiple inputs/outputs should also fall into place when moving the icons around. This will be a simple line that connects the Icons. Canvas size should be open, with capabilities to zoom in or out. If Icons get moved around the lines should follow and be locked in place. Right clicking the line will have the option to delete the line. The website should also include a descriptive name to be placed at the bottom of the icon that is to be centered when typing the name. Hovering over the Icons will display informative information for the user and will be determined at a later date but placeholder should be made. When an Icon is placed on the page, the tab bar should populate with the corresponding Icon name. If the Icon is deleted the tab should also be removed. See below for sample: [login to view URL] The user should also have the option to place Square boxes on the right pane. These boxes will have an option to name the box and assign the box to a specific person. Naming the box will flow on the top left hand side of the box. Although the Specific person is out of scope of this project, the placeholder should be created for visualization. It is also important to note that the specific person will be a name and email address. Upon Double clicking of the Icons the page will move to the corresponding tab that is associated with the Icon. Although the web pages for these Icons have not been created a default dummy page should be created to indicate the correct Icon being used. The page should contain a button to “Save Workflow”, “Submit WorkFlow” & “Assign Workflow” • Save workflow will only save the workflow for later use. Programmer will advise on the best course of action to take on how to do this in a way so that when the user uses the workflow again that all information on the right of the pane is shown again. • Submit workflow will Save and submit the workflow as it is. • Assign workflow will save & assign the workflow and send out email notifications Footer: Footer will be generic and placeholder should be put in place.