1      EJ Specialties Online Order Forms

EJ Specialties has a number of product order forms and would like to offer its customers a way to fill out these order forms online.

 

Customers can access order forms in the following 3 ways:

1. Direct Link from EJS website
2. Direct Link to an Email address based login page
3. Links from the customers Intranet

The EJS Website will show “Eazy Order” (This is a button for the Trunk Blanket and the Autodesk)

1. After clicking the option the order form will be shown.
2. On the order form there is a ‘SUBMIT’ and a ‘CANCEL’ button. After successfully pressing one of the buttons the customer returns to the place where the she opened the order form.

The EJS Website will show “Order Now” (This is a menu item under the badges menu item)

1. After selecting the menu item a login page will be shown asking for an Email address: https://ejspecialties.eazyworks.com/forms.aspx
2. The customer will enter the Email address and will press submit.
3. Based on the information in the Email address a company specific order form will open.
4. The ‘SUBMIT’ or ‘CANCEL’ button will bring the customer back to the EJS Website.

EJS Customers can get a link on their Intranet.

1. Clicking this link will open the order form
2. After clicking ‘SUBMIT’ or ’CANCEL’ the customer will return to her own intranet.

2      The Basic Forms

The following sections show the different forms developed for EJ Specialties.

The badge order forms can only be reached through the email login page.

 

Login page: https://ejspecialties.eazyworks.com/forms.aspx

This is a page using the EJS corporate identity.

 

Depending on the E-mail address the customer will be shown different order forms.

2.1.1      TAP Order Form

TAP customers can access the Order form by typing in an email address ending with: ‘@tap.com’

The TAP order form can be accessed directly by the following address: https://ejspecialties.eazyworks.com/forms-tap.aspx

2.1.2      SP Corp Order Form

SP Corp customers can access the Order form by typing in an email address ending with: ‘@spcorp.com’

The SP Corp order form can be accessed directly by the following address:

https://ejspecialties.eazyworks.com/forms-spcorp.aspx

The form can be accessed at: https://ejspecialties.eazyworks.com/auto-desk-order-form.aspx

The form can be accessed at: https://ejspecialties.eazyworks.com/trunk-blanket-order-form.aspx

3      Users of the System

Based on the test submittals the following people use the system:

 

This email address is being protected from spambots. You need JavaScript enabled to view it.

 

Robert Prentice: 605-484-3263

This email address is being protected from spambots. You need JavaScript enabled to view it.

Bob Prentice

410 Wessington Street South

Wessington, SD 57381

 

Carolyn Dowdy This email address is being protected from spambots. You need JavaScript enabled to view it.

 

Terri Phelps This email address is being protected from spambots. You need JavaScript enabled to view it.

 

Deb Collins This email address is being protected from spambots. You need JavaScript enabled to view it.

 

Michelle L Ritchie This email address is being protected from spambots. You need JavaScript enabled to view it.

 

This email address is being protected from spambots. You need JavaScript enabled to view it.

 

4      Linking the Order Forms

The following gives the code on how the forms can be linked on the EJS Website.

On the following page: http://www.ejnamebadges.com/78432.html

 

An ‘E&J Order’ button link has been added with the following URL:

 

https://ejspecialties.eazyworks.com/auto-desk-order-form.aspx?sReturn=http://www.ejnamebadges.com/78432.html

 

In case of a HTML hyper link the code will be as follows:

 

Order the Auto Desk Now!

 

Where ‘Link’ should be replaced with the destination URL, as shown above.

4.1.1      Explanation of the Link

The ‘?sReturn=http://www.ejnamebadges.com/78432.html’ part in this link takes care that after successful submittal or cancellation the user is returned to the EJS Website:

http://www.ejnamebadges.com/78432.html

 

On the following page: http://www.ejnamebadges.com/78401.html

 

An ‘EAZY ORDER’ link has been added with the following URL:

 

https://ejspecialties.eazyworks.com/trunk-blanket-order-form.aspx?sReturn=http://www.ejnamebadges.com/78401.html

A link to the order forms is located in the Badge Menu under ‘Order Now’: http://www.ejnamebadges.com/91725/index.html

 

The destination URL for this link should be as follows:

 

https://ejspecialties.eazyworks.com/forms.aspx?sReturn=http://www.ejnamebadges.com/91725/index.html

 

This link will link to the Email Login Page. After entering a valid Email address it will go to the badge order form.

The customer that wants to place the badge order form on her intranet has to use the following link:

 

https://ejspecialties.eazyworks.com/default.aspx?sReturn= http://EazyWorks.com

 

NOTE: The return address should be set to the return address of the Customer. Now it is set to:

 

http://EazyWorks.com

 

So replace the http://EazyWorks.com part of the link above with: http://CustomersIntranetAddressToReturn (with the correct address).

 

4.4.1      GSK

For the GSK order form the following form can be used for the intranet:

 

https://ejspecialties.eazyworks.com/forms-gsk.aspx?sReturn=http://gsk.com

 

This will link back (after ‘Submit’ or ‘Cancel’) to the GSK Home page (any other address can be used).

4.4.2      Schering

For the Schering order form the following form can be used for the intranet:

 

https://ejspecialties.eazyworks.com/forms-spcorp.aspx?sReturn=http://www.spcorp.com

 

This will link back (after ‘Submit’ or ‘Cancel’) to the Schering Home page (any other address can be used).

4.4.3      Tap

For the Tap order form the following form can be used for the intranet:

 

https://ejspecialties.eazyworks.com/forms-tap.aspx?sReturn=http://www.tap.com

 

This will link back (after ‘Submit’ or ‘Cancel’) to the Tap Home page (any other address can be used).

5      Linking Options

If you want only authorized users to order, it is possible to link the user to a login screen. This login screen will be located on the EazyWorks server. We will take care that the login screen will match your site design.

The following figure shows how it could be added to the current menu. The ‘Order Now’ menu item is made green to emphasize it, but this should be changed on the EJS website. We can not do this.

 

 

 

From this menu item we can link to a login screen on the EazyWorks domain. This will be in the same design style as the EJNameBadges web site. Check out the following link:

 

https://ejspecialties.eazyworks.com/forms.aspx

 

This address shows a page where the customer has to enter an e-mail address. We can add a check on the Email address to see if the customer is allowed to order.

 

6      Customer Login Options (Password and or Email)

It is possible to give the customer a login option. This will prevent other people to use the Order form that is specifically developed for a specific customer.

The login can work with the users e-mail as login name. After the user entered the e-mail it is possible to analyze the e-mail address to find out the company the person is working for. Based on this information the user will only see order forms that are applicable for her company.

This is however not completely safe because anyone could login if they know the companies e-mail addresses.

To make it more save you can take care that the user has to fill out a password. This would require that you have to keep user accounts for everyone that wants to order badges. Someone without a user account first has to apply for an account. You will get an e-mail about this account application and can decide to give this user, specific rights to order forms.

 

The nice thing about user accounts is that information that has to be filled out on the form can already be pre filled out based on the information that is stored with the user account. E.g. the shipping address.

 

It is no problem to add automatic password recovery for this option. This way if the user forgets her password she can request a new password and this will be mailed to her registered e-mail address. It is possible to add an additional security question.

 

The TAP Badger order form will be connected with Email Address check only.

The SP Corp Badger order form will be connected with Email Address check only.

 

7      What happens where and when?

This chapter describes some technical background on the Order Form implementation.

All web pages developed by EazyWorks are located on the EazyWorks.com domain. On this domain there is a EJSpecialties sub-domain.

E.g.: https://EJSpecialties.EazyWorks.com/Login.aspx (Login page for the back end)

:// start of the address shown in the browser.

All data is placed in a secure data center in Los Angeles.

All credit card information is encrypted on the server, and can only be viewed correctly if the user has a valid login with password.

Notifications are sent out to customers when orders are successfully submitted. The customer will get a message that the order is successfully submitted.

Furthermore an e-mail will be sent to the Admin role (any user with this role) at the moment an order is placed and at the moment an order is completed.

8      How to get to the filled out form data?

This chapter explains how to get to the form data, how to export it and how to print it. New forms ‘Pending’ that are processed can be moved to ‘Completed’.

After going to http://ejspecialties.eazyworks.com/login.aspx, the browser will display the following login screen:

 

 

 

By selecting one of the specific icons the following actions can be taken:

1. Login (after filling in name and password, pressing enter will have the same effect)
2. In case you forgot your password pressing the forget password will prompt the system to ask a security question after successfully answering the question a new password will be sent to the e-mail connected to the user.
3. To create a new account for new users, just press the new account icon and fill out the dialog that will pop up.

After successfully logging in, the user will get to the desktop. The desktop has tabs on the left-hand side, pressing these tabs will change the desktop. There is a desktop for the forms and a desktop for the user settings.

8.2.1      The Forms Desktop

The following figure shows the Forms Desktop with a possible composition of open windows.

 

 

From the Forms Desktop multiple actions can be taken:

1. Open a List-Box showing all submitted forms
   1. By clicking any of the listed forms a window with the individual form information will be opened.
   2. By clicking the Export to Excel icon in the lower right corner of the List-Box will export all data that at that moment is selected in the List-Box
   3. For the List-Box the following actions can be performed:
      1. i.      Sort the List-Box on any of the columns
      2. ii.      Filter the orders based on information in any of the columns
      3. iii.      Resizing of the columns.
2. Chat with Users online
   1. By pressing the chat icon in the upper left corner a window with the users online will open (if it was not already open).
   2. By clicking one of the users online a chat window will be opened and you can start a chat with that specific person.
3. The individual Order Form has the option to print the individual form. This will recreate the form as it was filled out on the internet.
4. To change the user setting, the user settings tab can be pressed, this will go to a different desktop, but by pressing the Order Form Tab the user can return to the From Desktop, and all windows will be still open.
5. Logging out will happen by pressing the upper right logout icon.

8.2.2      Excel Export

 

8.2.3      User Settings

Below a picture of the User settings tab that will become visible after the user clicks the User Settings tab. In this view the Users of the system can be managed and the password of the user can be changed.

 

 

Below a table of all the Icons that are used within this application and what actions they represent.

 

Status Icons (As shown in the Order Form list box)
	New Order: Order is New and needs to be packed and shipped.
	Completed Order: Order is completed and shipped to the customer.
Login Screen (All Icons shown on the Login Screen)
	Password: not an active Icon, just to show it is the password field
	User Name: not an active Icon, just to show it is the user information field
	Forgot Password: If the user forgets her password, she can press this Icon and after answering a security question, a new password will be sent to the registered e-mail address for that specific user name
	New Account: Pressing this Icon will open a dialog in which new account information can be filled out. After the information is filled out an e-mail notification will be sent to the person making the new account and to the administrator of the system. The administrator than can approve the new account request.
	Login: After filling out the user name and the correct password the user can press this icon to login. (Pressing enter will work as well)
	Logout: This icon can not be seen on the login screen but is shown in the upper right corner of each desktop. Pressing this icon will log the user oft the system. After 10 minutes of inactivity the user will receive a warning message. If after an additional 5 minutes the user did not show any activity the user will automatically logged off.
Tab Controls (On the left of the desktop screens)
	Order Forms: Pressing this ‘tab’ will display the desktop that is used to control the Order forms.
	System Settings: Pressing this ‘tab’ will display the desktop that is used to control the System Settings forms.
Controls On the Order Form Desktop
	New Order Forms: Pressing this Icon will open a list box with all the ‘new’ order forms. If an order form is completed and the product is shipped, the ‘Next’ button can be pressed and the order form will be removed from this list box.
	All Order Forms: Pressing this Icon will open a list box that will display all submitted order forms. The list box will only show the 250 most recent order forms.
Icons for the Chat Window
	Users Online: Pressing this Icon (located in the upper left corner of the desktop) will open a window showing the users that are currently online. Clicking one of the users will open a window that can be use to chat.
	Open Users Online: In the chat window, clicking this button will open the Users online window.
Icons for System Settings Desktop
	New Password: Pressing this Icon will give the user a dialog to change her password. After change of the password a notification will be sent by Email to the administrator and the user.
	User List: Pressing this Icon will open a dialog showing the different users of the system and gives the user the option to manage the accounts for the different users.
General window Icons
	Close: Used to close a window. The grey version means the window is not active.
	Maximize: Used to bring the window to original size after it is minimized.
	Minimize: Used to collapse a window to only its title bar.
	Size: Clicking the lower right corner of a window can be used to resize a window
Icons used within a List Box
	Resize Column: Used to resize columns of the List Box
	Filter: Can be used to filter the data of the list box for that specific column. Green means that a filter is active.
	Sort: Clicking this icon can sort the list box based on the data of that specific column. Green Arrow Up means Ascending sort, Green Arrow down means descending sort and no Green Arrow means not sorted.
	Start Page: In case the list box contains more than 10 items it will start displaying items on different pages. By clicking this icon the list box will go to the first page.
	End Page: In case the list box contains more than 10 items it will start displaying items on different pages. By clicking this icon the list box will go to the last page.
	Next Page: In case the list box contains more than 10 items it will start displaying items on different pages. By clicking this icon the list box will go to the next page with results.
	Previous Page: In case the list box contains more than 10 items it will start displaying items on different pages. By clicking this icon the list box will go to the previous page with results.
	Next: For new orders this icon can be pressed to change the status of that order from ‘New’ to ‘Completed’
	Previous: Pressing this Icon (which can only be visible for a completed order) will move the status of the ‘completed’ order to ‘New’ order. Notifications will be sent out like the way if it was just entered new.
	Export to Excel: Pressing this icon at the lower right corner of the list box will take care that the data displayed in the List Box is exported to an Excel Spreadsheet.
Icons for System Settings Desktop
	Print: This Icon is visible if an order form is opened in the upper left corner. Pressing this Icon will open the filled out form into a new browser window. From this browser window the Order form can be printed. You can prevent the 2 page print out by changing your page set up in your browser. 1) For Internet Explorer you go to the 'File' Menu (in the main menu bar) 2) Select the menu item: 'Page Setup' 3) This will open a 'Page Setup' dialog. Inside this dialog, you can set 'Margins' 4) Change the margin values to the following settings: Left: 0.125 Right: 0.125 Top: 0.1 Bottom: 0.118 These are the minimum values (if you would have entered 0 it would have changed it to these values automatically). If the address starts with 'https://' It means that the communication between the Server and your computer is encrypted (so it is secure, no one else can do anything with that information, only you, on your computer).

 

 

9      Possible Extensions

The current system can easily be extended to include more functionality. Some examples of possible extensions are:

1. Add many more types of forms. Make different user accounts that will see different forms.
2. Add lifecycle to the forms. It is possible to track the status of the orders and add additional lifecycles. For instance:
   1. Order Placed
   2. Order Approved
   3. Order in Progress
   4. Order Shipped
3. Add automated notifications, e.g. at the moment that an order is shipped the customer is automatically notified. Or is an order is not shipped within 2 days that a manager is notified.
4. It is possible to split the activities across different people. For instance it is possible that a single person is approving the orders while another person is shipping the orders. At the moment the first person approves the order the shipping person is notified to ship the order. Each person will get a view of orders that need attention, specific for this person. (So the shipping person will not see the orders that are not yet approved in her action list).
5. Different kinds of reporting. Who are the main customers etc. The system can be made that these reports are sent out automatically and periodically. It is also possible to monitor the performance if the lifecycle is known. E.g. how long does it take to ship the badges after they are ordered?
6. Add user accounts for customers, so that they do not have to fill out most of the information.

 

10   Maintenance

Take the following steps:

1. Delete the first 3 rows
2. Delete the date span you don’t need
3. Insert 10 columns after column ‘I’ (From J to T)
4. Copy in the values for first 5 rows in column ‘J’
5. Add =IF(A5="",IF(J4="",IF(J3="",IF(J2="",J1,J2),J3),J4),A5)
6. Copy down the formula
7. Copy the column 4 columns to the right (5 in total)
8. Copy the 5 columns as value to the next 5 columns
9. Sort on what you are interested in on one of the value columns
10. Change the Rev Text
11. Update the image file (and CSS if needed)
12. Update the ‘(DLR)’ dates for Abbott
13. Change the Web Config to add the badge
14. Search for the key through all files and make the appropriate changes
15. Change the Server side web config (down load it and fix it on the desktop)
16. Change the Webconfig file
    1. Update from subversion, Note the new Rev and add 1
    2. Rev, date, your name, description of change (On the Server file during publish)
17. Make new masterpage MasterPageXXX.master
    1. Create new masterpage by creating new item
       1. i.      Checkmark Place code in separate file should be checked
       2. ii.      Visual Basic
       3. Copy over the VB content to the VB file
          1. i.      ‘Partial Class’ line  Don’t change
          2. At the end of the masterpage.vb file the JS file is called, change this
             
             

1. Be sure to Update any committments that may have been done by somebody else.  Pending Changes/Update.
2. Create a new masterpage.  File, New, File.  Select 'Master Page'.  Make sure 'Place code in seperate file' is checked.  Name the master page MasterPageCustomerFormname.master
3. If there is a customer masterpage, copy over its contents to the new masterpage.
   1.  
      • Add/Modify copyright notice
      • Modify the title tag, see example below.
        
      • Change the XXX-Header, XXX-Sidebar, and Footer images (Dependant on the situation).  See the image below as an example.
        
4. From an existing VB file, With the exception of the Partial Class line, copy over all other content to the the new file.  
5. At the bottom of the New Master Page, you will see the following code.  Change the FormSubmitXXX.js to the new name (FormSubmitCustomerFormname.js).

Creating a New FormSubmit JS File

1. Create a new JS.  File, New, File.  Select 'JScript File'.  FormSubmit file: FormSubmitCustomerFormname.js
2. If available, copy of the content from a similar (same customer) FormSubmit file.
3. Replace the arItemsXXX_XX  with a new unique arItemsXXX_XX( a lot of times e.g. 75).  This should also edit the items in the following step.
   
4. Now you have to edit the changes in the Option Array.  The changes are highlighted below.  See the BEFORE and AFTER images.
5. Change out the MkFrmXXX function name and call (3 changes)

FormSubmit.js Modifications

1. If there is not any previous setting for the email log in, then you will have to make additions in the FormSubmit.js.  There will be several changes in function EmailSub(e) and in function SubmitEmail().
2. Within function EmailSub(e): Add the lines as in the highlighed examples below.  An additional modification will need to be made to the 'trimming' of the email.  See the notes: /* Subtract the number of characters in the company email address including '@' and '.Com'.
   E.g. @Tap.com = 8 */ 
3. Within function SubmitEmail(): Make changes similar to the previous step.

Change the CSS file

1. Add the header class in Layout.css.  Most of the time this is not needed because it can use the same class as an existing customer.  If you are adding new headers and/or badges, take care that the dimensions match those in the CSS file.
2. #header-img, #spcorp-header-img, #gsk-header-img, #abbott-header-img, #wyeth-header-img
   {
   width: 800px;
   height: 160px;
   margin: 0px auto 0px auto;
   }
3. #abbott-badges-img
   {
   width: 800px;
   height: 2000px;
   margin: 0px auto 0px auto;
   }

Create New Web Form

1. Create a new Web Form.  File, New, File.  Select 'Web Form'.  Make sure 'Place code in seperate file' is checked.  Name the Web Form Forms-Customer-Formname.aspx
2. Copy out the contents of a similar form, use the same customer if you can.
   
3. Paste the contents into the newly created file, but preserve the first line of code.
4. If needed, change the divBadgeTable title.  EJS should have provided this information.
5. Copy over the contents of the related VB file.  Again, preserve the top line of code.  No changes are needed in the contents copied over.

Modify Web.Config

Even though the following changes will be made to the web.config file on the development system, they will have to be repeated over to the LIVE system.  This is because the web.config file is not copied/sync'd over to the LIVE system.

You will be adding the new Option Array Items that you placed in the FormSubmitXXX.js file.  See the sample of added items below.

Change the Indus.js File

1. Add the array (copy from the small JS file).

• sXXX1opt (Centocor, Pfizer)

1. Add section for popup (Badge Abbott NovaQuest)

• Change the name
• replace all arItemsXXX (13 Occurences)
• Change the 'Abbott NovaQuest' in the first HTML line after the case statement.

1. Add Section for Print Preview

• Replace all arItemsXXX (13 occurences)

1. Add additional Data Fields (optional)
2. Add database name etc.
3. Remove Credit card check
4. Test the application by entering a new form. 
5. Test the email page: forms.aspx