Xerox FreeFlow Web Services User guide

Xerox FreeFlow Web Services User guide
Version 5.0, July 2006
701P45332
Site
Customization
User Guide
for FreeFlow® Web Services
Xerox Corporation
Global Knowledge and Language Services
800 Phillips Road - Bldg. 845-17S
Webster, NY 14580
Copyright © 1996-2006 Xerox Corporation. All rights reserved. XEROX®, Xerox Canada Ltd®, Xerox Limited®, FreeFlow®, The
Document Company® and all identifying numbers used in connection with the Xerox products mentioned in this publication are
trademarks of XEROX CORPORATION. Copyright protection claimed includes all forms and matters of copyrightable material and
information now allowed by statutory or judicial law or hereinafter granted, including without limitations, material generated from the
software programs which are displayed on the screen such as styles, templates, icons, screen displays looks, etc.
While every care has been taken in the preparation of this material, no liability will be accepted by Xerox Corporation arising out of
any inaccuracies or omissions.
Printed in the United States of America.
Other company trademarks are acknowledged as follows:
Adaptec®, the Adaptec logo, SCSlSelect®, and EZ-SCSI® are trademarks of Adaptec, Inc
Adobe PDFL - Adobe PDF Library Copyright © 1987-2005 Adobe Systems Incorporated
Adobe®, the Adobe logo, Acrobat®, the Acrobat logo, Acrobat Reader®, Distiller®, Adobe PDF JobReady™, PostScript®, and the
PostScript logo are either registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Copyright 1987 - 2005 Adobe Systems Incorporated and its licensors. All rights reserved.
Autologic® is a registered trademark of Autologic Information International, Inc.
Compaq® and QVision® are registered United States Patent and Trademark Office, for Compaq Computer Corporation.
DEC, DEC RAID, and Redundant Array of Independent Disks are registered trademarks of Digital Equipment Corporation.
Dundas - This software contains material that is © 1997-2000 DUNDAS SOFTWARE LTD., all rights reserved.
Hummingbird NFS Solo® is a registered trademark of Hummingbird Communications, Ltd.
Imaging Technology provided under license by Accusoft Corporation.
ImageGear © 1996-2005 by AccuSoft Corporation. All Rights Reserved.
Intel® and Pentium® are registered trademarks of Intel Corporation.
Novell® and NetWare® are registered trademarks of Novell, Inc. in the United States and other countries.
Oracle® is a registered trademark of Oracle Corporation Redwood City, California
TMSSequoia - ScanFix ® Image Optimizer Copyright © TMSSEQUOIA, Inc. 1991-2000. All rights reserved.
Sony™ and Storage by Sony™ are trademarks of Sony.
Preps™ is a registered trademark of Creo Inc. All rights reserved.
Quark® and QuarkXpress® are registered trademarks of Quark, Inc.
StorageView™ is a trademark of CMD Technology, Inc.
TextBridge® is a Registered Trademark of ScanSoft, Inc.
TIFF® is a registered trademark of Aldus Corporation.
Windows®, Windows XP®, and Internet Explorer are trademarks of Microsoft Corporation; Microsoft® and MS-DOS® are registered
trademarks of Microsoft Corporation.
Portions Copyright © 2001 artofcode LLC.
This software is based in part on the work of the Independent JPEG Group.
Portions Copyright © 2001 URW++. All Rights Reserved.
This product includes software developed by the Apache Software Foundation.
Copyright © 1999-2003 The Apache Software Foundation. All rights reserved.
This software is based in part on the work of Graeme W. Gill.
© Press-sense Ltd. 2002-2006. All rights reserved
Includes Adobe® PDF Libraries and Adobe Normalizer technology
The Graphics Interchange Format© is the Copyright property of CompuServe Incorporated. GIFSM is a Service Mark of CompuServe
Incorporated.
Portions contain an implementation of the LZW algorithm licensed under U.S. Patent 4,558,302
All non-Xerox brands and product names are trademarks or registered trademarks of their respective companies.
Changes are periodically made to this document. Changes, technical inaccuracies, and typographical errors will be corrected in
subsequent editions.
Contents
Introduction .... ..................................................................................................................... 5
Chapter One:
The Skin Window................................................................. 7
The Skin Library.................................................................................................................. 10
Skin List............ ................................................................................................................... 11
Search Skin....... ................................................................................................................... 13
Assign to Customer ............................................................................................................ 15
Assigning Skins to Customers .......................................................................................... 15
Chapter Two:
The Skin Editor .................................................................. 17
Login Page ....... ................................................................................................................... 20
Login Page Toolbar............................................................................................................. 21
Site Frame......... ................................................................................................................... 29
Edit Privilege Tabbed Bar .................................................................................................. 30
Site Frame Toolbar.............................................................................................................. 30
Administrator Privilege ..................................................................................................... 31
Supervisor, Designer, User, and Super User Privileges ................................................ 40
e‐Mail Banner .. ................................................................................................................... 43
e‐Mail Banner Toolbar........................................................................................................ 44
Catalog Banner ................................................................................................................... 49
Catalog Banner Toolbar ..................................................................................................... 50
Style Sheet ........ ................................................................................................................... 55
Editing Sub‐panels.............................................................................................................. 55
Buttons.............. ................................................................................................................... 57
Fonts ................. ................................................................................................................... 60
Control Buttons ................................................................................................................... 61
Preview Pane ... ................................................................................................................... 62
Chapter Three:
Appendix ........................................................................... 63
Site Customization Installation Guide ............................................................................. 65
Converting HTML pages to .mht files ............................................................................. 66
The Customer Preferences Panel ...................................................................................... 66
Image Management ‐ Download ...................................................................................... 67
Privilege Sensitivity ............................................................................................................ 68
Introduction
Site Customization, the FreeFlow Web Services branding and personalization application, has been designed to
provide Print Providers with the ability to create branded applications for their Print Buyer customers, in
order to enable their customers to maintain their own corporate identities while providing a personalized
service.
Site Customization is an independent component that is activated through the appropriate licensing, upon
purchase.
The development and the design of Site Customization cover two spheres of endeavor:
• Look & Feel – which enables complete design control of the top and left bars of the interface, and styling
control (fonts, color, size etc.), of the main application window
• Workflow – which enables the Print Provider to customize the workflow per scheme (i.e. permission
environment and access paths)
The objective of the Site Customization application is to:
•
•
•
•
•
Provide Print Providers with a simple and intuitive branding tool
Enable Print Providers to import existing designs to the application
Enable Print Providers to import pre‐made MHT1 designs
Provide adjustment tools for the application
Provide activation tools (i.e. buttons, logos etc.) for the utilities
Notes: 1. The created Site Customization skins are a part of the Print Provider properties
2. The skins must be prepared by a designer who has knowledge of basic HTML design as well as the
operation of HTML design tools.
1
MHT is a form of HTML that is saved such that it will include all the HTML elements in one package. When
uploading, FreeFlow Web Services analyzes the file and automatically places all elements into the correct locations.
The use of this upload method ensures the design’s validity.
Chapter One: The Skin Window
The Skin Library
Chapter One: The Skin Window
The Site Customization option is accessed through the Branding window found on the Print Provider side,
under Management / Branding.
The Branding window is divided into the following two panes:
• Skin Library
• Assigned to Customers
Site Customization User Guide
9
Chapter One: The Skin Window
The Skin Library
The Skin Library
The Skin Library displays a list of skin names that have been entered into the system. When a Print Provider
designer2 enters a Skin name into the system, the designer can then define the appearance of that particular
skin. The designer has the ability to add or delete Skin names, as well as select the Skin names of existing
skins for the purpose of eliciting information and editing. The designer has the ability to rename a Skin
name, as well as the ability to define which of the Skin names is the default Skin name.
Note: When a Skin name is selected in the Skin list, the Skin name appears in the Assigned to Customers pane.
The Skin Library is composed of the following two elements:
• Skin List
• Search Skin
2
The individual(s) entrusted by the Print Provider to set up the Site Customization application.
10
Site Customization User Guide
The Skin Library
Chapter One: The Skin Window
Skin List
The Skin List contains a list of all of the Skin names as well as the following List Management buttons:
New Skin
Enables adding new Skin names to the Skin list.
Rename Skin
Allows renaming specific skins.
Delete Skin
Enables deleting specific skins from the Skin list.
Duplicate Skin
Enables duplicating a specific skin from the Skin list.
Set As Default
Allows determining which skin is the Default skin.
Adding a New Skin
In order to create a new, defined skin, the designer begins by adding a new Skin name to the Skin list. When
a new Skin name has been added, a folder bearing the new Skin name is automatically placed in the Image
Bank, under Site Customization.
Note: The Skin name must be a unique value. When duplicated, the new skin name is called Copy of ‘skin name’
(see Duplicate Skin below). Likewise, the respective folder in the Image Bank will also be called Copy of
‘skin name’.
To add a new skin to the Skin list, carry out the following steps:
1
Click on the New Skin button; the Add New Skin dialog box appears.
2
Enter a unique name and then click on OK; the new skin name appears in the Skin list.
3
To create a new, defined skin, click on the new skin name and then click on the Skin Editor button (see
The Skin Editor, p.17).
Site Customization User Guide
11
Chapter One: The Skin Window
The Skin Library
Renaming a Skin
To rename a skin located in the Skin list, carry out the following steps:
1
Click on the target skin name; the target skin name is selected.
2
Click on Rename Skin; the Rename Skin dialog box appears.
3
Enter a new name into the Skin name box.
4
Click on OK; the new skin name appears in the Skin list.
Deleting a Skin
To delete a skin from the Skin list, carry out the following steps:
1
Click on the target skin name; the target skin name is selected.
2
Click on Delete Skin; the Delete Skin confirmation dialog box appears.
3
Click on Yes; the target skin disappears from the Skin list.
Duplicating a Skin
To duplicate a skin in the Skin list, carry out the following steps:
1
Click on the target skin name; the target skin name is selected.
2
Click on Duplicate Skin; a duplicate skin appears in the Skin list.
12
Site Customization User Guide
The Skin Library
Chapter One: The Skin Window
Note: The duplicate Skin name has “Copy of” prefixed to the original name.
Make Default
The designer has the ability to determine which skin, in the Skins list, will be the Default skin used in the
general application path. During the first installation, the System Standard3 skin will be set as the default.
In order to determine a new Default skin, carry out the following steps:
1
Click on the target skin name; the target skin name is selected.
2
Click on the Set As Default icon
at the top of the Skins: Pane and the new skin is designate Default”.
Search Skin
3
The System Standard skin is located in the Skin list but cannot be edited or deleted. The System Standard skin has
been set as the Default skin for new installations and is used as the Site Customization Reset for de-bug purposes.
Site Customization User Guide
13
Chapter One: The Skin Window
The Skin Library
Search Skin is the Site Customization mechanism that enables the immediate location of a specific skin or
group of skins.
To search for a specific skin or group of skins, carry out the following steps:
1
Enter the name(s) of the target skin(s) into the Search Skin field.
Note: A search can be carried out with only one letter of the target Skin(s) name. However, with more letters
or the complete name, the search becomes more precise.
2
Click on Search; the search is carried out and the ‘filtered” skin(s) appear in the Skin list.
3
Click on Reset to clear the Search skin field and return all of the Skin names to the Skin list.
14
Site Customization User Guide
The Skin Library
Chapter One: The Skin Window
Assign to Customer
The Assign to Customer pane is composed of the following elements:
• Skin Name
The name of the skin that was selected in the Skins list
• Assigned to Customers List
The names of the customers who have been assigned the specific skin
chosen in the Skins list
• Skin Icon
Generic Skin icon that reflects the FreeFlow Web Services interface
• Assign to Customers Button
Accesses the comprehensive Assign to Customer list
• Skin Editor Button
Accesses the Edit Skin system
Assigning Skins to Customers
The Assigned to Customers button accesses the Assign to Customers dialog box, which displays a
comprehensive list of all the Print Provider customers, as determined in the Print Provider’s Management /
Customers / General window.
Site Customization User Guide
15
Chapter One: The Skin Window
The Skin Library
A checkbox preceding each Print Buyer customer name enables the designer to determine which skins are to
be assigned to which Print Buyer customer. Checkmarking a checkbox enables the skin for the specific Print
Buyer customer. Likewise, clearing a checkbox disables the skin for the specific Print Buyer customer.
To assign a skin to a customer, carry out the following steps:
1
Click on the target skin in the Skin list.
2
Click on the Assign to Customers button; the Assign Skin to Customers dialog box appears.
Note: The Assign Skin to Customer dialog box contains a list of all of the Print Provider customers together
with the name of their present skin. If a skin has not yet been assigned, a skin name is not displayed.
3
Checkmark the target Customer names(s) and click on Assign; the targeted customers appear in the
Assigned to Customer list.
Note: A skin that has been assigned to a customer annuls a previously assigned skin.
16
Site Customization User Guide
Chapter Two: The Skin Editor
Chapter Two: The Skin Editor
The Skin Editor
The Skin Editor encompasses the entire branding mechanism and is divided into five windows. Each window
is accessed by clicking on the associated tab:
•
•
•
•
•
Login Page
Site Frame (which allows customizing the five privileges)
e‐Mail Banner
Catalog Banner
Style Sheet
Site Customization User Guide
19
Chapter Two: The Skin Editor
Login Page
Login Page
The Login Page window enables the designer to brand the entire Login Page of the FreeFlow Web Services
system. The original application design appears as a shadowed, gray, background in order to assist in the
designer’s orientation. This gray image can be selected and temporarily deleted, and will permanently
disappear when an HTML design has been uploaded.
Note: The maximum dimensions of the Login Page are as follows:
•
Width – 1000px
•
Height – 700px
The Login Page contains the following elements:
• Login Page Toolbar
Containing tools for emplacing and modifying text and images
• Edit Tab
Displays the Login Page with branding guidelines, for text and image
emplacement
• Save and Preview Tab
Saves all editing carried out in the Login Page window and displays the
Login Page window without branding guidelines
Note: Save and Preview triggers an HTML parsing and re‐direction of
Image links to the Image Bank. If the image has not been placed in the
Error icon,
proper folder, the preview will be marked with the
indicating a missing image.
20
Site Customization User Guide
Login Page
Chapter Two: The Skin Editor
• Upload Login HTML Link
Enables uploading HTML design
• OK Button
Saves any changes made to the Login Page window and then closes the
window
• Cancel Button
Closes the Edit Skins windows and cancels any changes that were carried
out in the Login Page window
• Save Button
Saves any changes made to the Login Page window, without closing the
window
Login Page Toolbar
The Login Page toolbar contains the following elements:
• Editing Tools
Font selection, font size selection, font properties, cut, copy, paste, and undo/redo
• Image Bank Button
Accesses the Images Folder, for inserting images into the file
• Activate Button
Enables defining the functionality of the controls and buttons in the design
Uploading a Design to the Login Page
To upload a design to the Login Page window, carry out the following steps:
1
In the Login Page window, click on the Edit tab (located at the bottom‐left of the window); the Edit view
appears.
2
Click on the Upload Login HTML link; the Upload confirmation window appears.
3
Click on Yes to continue; the Login: File Upload window appears.
Site Customization User Guide
21
Chapter Two: The Skin Editor
4
Login Page
Carry out the Login: File Upload instructions, browse to the target Login Page mht file and click on Next;
the design appears in the Login Page.
Note: The HTML page must be converted to a Web Archive (*.mht) file when uploading. For instructions on
converting HTML pages to Web Archive (*.mht) files, see Appendix: Converting HTML pages to Web
Archive (*.mht) files, page 65.
22
Site Customization User Guide
Login Page
Chapter Two: The Skin Editor
Saving and Previewing the Login Page
The Save and Preview tab enables the designer to preview the Login Page without the grids and table lines of
the Edit view. The designer can toggle between the Edit and Save and Preview views, using the Mode tabs at
the bottom of each window.
Notes: 1. When clicking on the Save and Preview tab, all changes to the specific window are automatically
saved.
2. In the Save and Preview view, buttons are not active for testing purposes (buttons respond to clicking
by accessing the Disabled Mouse Clicks message box).
1
After the upload process has been completed, click on Save and Preview; a preview of the new
application view appears.
Note: Any missing images will be marked with the
Site Customization User Guide
Error icon.
23
Chapter Two: The Skin Editor
Login Page
Activating the Various Elements in the Login Page
After the MHT file has been uploaded, each button or link must be activated, whereby an action and
definition of the rules for each button or link is assigned.
To activate the various elements in the Login Page, continue with the following steps:
1
In the Login Page toolbar, click on the Activate button, the Activation window appears.
Note:
The Activation window is divided into the following three panes:
• Left Pane, which displays the dynamic list of objects (images or texts) for activation
• Center Pane, which displays the Editor instructions
• Right Pane, the Reporting pane, which displays the list of required and optional buttons for
activation
In Activation: Login, the Print Provider Designer activates buttons (which are also links), and the User and
Password fields. The list of objects for definition is dynamically built in the Left pane.
24
Site Customization User Guide
Login Page
Chapter Two: The Skin Editor
Note: When selecting an object in the Left Pane list, the corresponding object in the design is automatically
selected, thereby establishing a visual bond between the List object and the Design object.
2
In the Login Page, double‐click on the Design object to be activated or click on the Design object and then
click on Add in the Activation Login Left Pane; a List object appears in the Left Pane list.
3
Enter an appropriate name in place of the default name.
4
Click on the Element Type dropdown box in the Center Pane and then click on the appropriate Element
type.
Note: 1. The Login Page HTML design must contain the following elements:
• Two text box fields (Username and Password)
• One image, which will function as the Login Button
2. When creating the Password textbox field in the program for producing the HTMLs, the textbox should
be defined as a Password Box.
3. The list of operations in the Right Pane is updated according to the selections made.
Important: The list of operations in the Right Pane has been divided into Optional and Required.
If an item from the Required list was not activated and the designer clicks on OK or Save and
Preview, the following alert appears: “One or more required buttons were not activated. Some
features will not be functional in production”.
Site Customization User Guide
25
Chapter Two: The Skin Editor
Login Page
Language Selection Activation (Localization)
FreeFlow Web Services enables choosing languages via the Login Page. In order to activate Language Selection
buttons, carry out the following steps:
Note: This is an optional button. If it is not defined, the Print Provider’s default language will be used in the
application.
1
Verify that Language icons have been placed into the HTML design.
2
Select Button/Link as the Element type.
3
In the Activated Function dropdown box, choose Select Language.
4
In the Language dropdown box, select a target language.
5
Repeat steps 2‐4, for each additional Language icon.
Note: When completing the language selection, the following message appears: “Language {language name}
was selected and will be used in the main application window”.
26
Site Customization User Guide
Login Page
1
Select the OK button to complete.
2
Select OK to confirm saving the Login page.
Chapter Two: The Skin Editor
Editing the Skin
After the HTML skins have been uploaded, approved and activated, the designer has the ability, at any time,
to edit the final design.
To edit the final design, carry out the following steps:
1
To reposition images or objects, click on the target image or object and ‘drag and drop’ to new location.
2
To resize images or objects, click on the target image or object and drag the anchor points to the new
location.
3
To enter text, click on the target text location and type in the require text.
4
To edit and stylize existing text, select the existing text and carry out the changes using the tools found
in the toolbar.
Site Customization User Guide
27
Chapter Two: The Skin Editor
Login Page
Uploading Images and Objects
To upload new images, carry out the following steps:
1
Click on the target image location.
2
Click on the Image button in the toolbar; the Image Folder appears.
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the Login Page.
4
To save and preview the new images, click on Save and Preview in the Login Page window.
To change images, carry out the following steps:
1
Click on the target image to be changed.
2
Click on the Image button in the toolbar; the Image Folder appears.
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the Login Page.
4
To change additional images, repeat steps 1‐3.
5
To save and preview the new images, click on Save and Preview in the Login Page window.
28
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
Site Frame
The Site Frame windows are composed of Top and Left frames and the Main Application window and enable
the branding of the Top and Left bars of the FreeFlow Web Services system windows. The Site Frame windows
also enable determining the content of the Main Application window (see Default Page, p 38). Each frame
displays the original application design as a shadowed, gray, background in order to assist in the designer’s
orientation. This gray image can be selected and temporarily deleted, and will permanently disappear when
an HTML design has been uploaded. The Site Frame windows provide the designer with the ability to vary
the FreeFlow Web Services system windows according to the different privileges.
Note: 1. The maximum dimensions of the Site Frame are as follows:
•
Left Bar width – 200px; height – 500px
•
Top Bar width – 1000px; height – 100px
2. The Top Panel HTML design must contain a Top Bar containing a table of seven or more cells, either
horizontally or vertically aligned
Site Customization User Guide
29
Chapter Two: The Skin Editor
Site Frame
The Site Frame window contains the following elements:
• Edit Privilege Tabbed Bar
Provides access to the various Privilege windows
• Site Frame Toolbar
Provides the tools necessary to carry out editing and activation
• Top and Left Bars
Areas for entering the Site Frame files
• Instruction Pane
Instructions as to how to upload and edit Site Frame files
• Edit Tab
Accesses the Edit view
• Save and Preview Tab
Saves all editing carried out in the Site Frame window and displays the
Site Frame window without editing guidelines
Note: Save and Preview triggers an HTML parsing and re‐direction of
Image links to the Image Bank. If the image has not been placed in the
proper folder, the preview will display a ‘red X’, indicating a missing
image.
• Upload Top Bar Link
Accesses the Top Panel: File Upload window
• Upload Left Bar Link
Accesses the Left Panel: File Upload window
• OK Button
Saves any changes made to the Site Frame window and then closes the
window
• Cancel Button
Closes the Edit Skins windows and cancels any changes that were carried
out in the Site Frame window
• Save Button
Saves any changes made to the Site Frame window, without closing the
window
Edit Privilege Tabbed Bar
The Edit Privilege tabbed bar enables branding the five different views of the FreeFlow Web Services system.
Each Edit Privilege window is designed the same; the difference being in the instructions found in the
Instruction pane.
Site Frame Toolbar
The Site Frame Toolbar is composed of the following elements:
• Editing Tools
Font selection, font size selection, font properties, cut, copy, paste, and undo/redo
• Image Bank
Accesses the Images Folder, for inserting images into the file
• Activate
Enables defining the functionality of the controls and buttons in the design
• Default Page
Accesses the Default Page dialog box
30
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
Administrator Privilege
As the Administrator privilege provides the FreeFlow Web Services operator with complete operation control,
the Administrator view is used as the primary design and as a base or an infrastructure upon which the
designer later creates the other user views. Any branding carried out in the Administrator Privilege window is
automatically applied to all other privileges.
The Administrator Privilege window allows the designer to brand the Top and Left bars of the FreeFlow Web
Services system. To edit the Administrator view, carry out the following steps:
1
Click on the Edit Privilege: Administrator tab; the Administrator Privilege window appears (note the
instructions in the Main Application window).
2
Click on the Edit tab located at the bottom‐left corner of the window.
3
Click on the Upload Top Bar link; the Upload confirmation window appears.
Site Customization User Guide
31
Chapter Two: The Skin Editor
Site Frame
4
Click on Yes to continue; the Top Panel: File Upload window appears.
5
Carry out the Top Panel: File Upload instructions, browse to the target Top Panel file and click on Next; the
Top Panel appears in the Site Frame window.
32
Site Customization User Guide
Site Frame
6
Chapter Two: The Skin Editor
Click on the Upload Left Bar link; the Upload confirmation window appears.
Site Customization User Guide
33
Chapter Two: The Skin Editor
Site Frame
7
Click on Yes to continue; the Left Panel: File Upload window appears.
8
Carry out the Left Panel: File Upload instructions, browse to the target Left Panel file and click on Next; the
Left Panel appears in the Site Frame window.
34
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
Saving and Previewing the Site Frame
The Save and Preview view enables the designer to preview the final result without the grids and table lines of
the Edit view. The designer can toggle between the Edit and Save and Preview views, using the tabs at the
bottom of each window.
Notes: 1. When clicking on the Save and Preview tab, all changes to the specific window are automatically
saved.
2. In the Save and Preview view, buttons are not active for testing purposes (buttons respond to clicking
by accessing the Disabled Mouse Clicks message box).
1
After the upload process has been completed, click on Save and Preview; a preview of the new application
view appears.
Note: Any missing images will be marked with the
Error icon.
Activating the Various Elements in the Site Frame Top and Left Bars
When the final design has been completed, each button or link must be activated, whereby an action and
definition of the rules for each button or link is assigned.
To activate the various elements in the Site Frame Top and Left bars, continue with the following steps:
1
In the Site Frame toolbar, click on the Activate Top or Left button; the Activation window appears.
Note:
The Activation window is divided into the following three panes:
• Left Pane, which displays the dynamic list of objects (images or texts) for activation
• Center Pane, which displays the Editor instructions
• Right Pane, the Reporting pane, which displays the list of required and optional buttons for
activation
Site Customization User Guide
35
Chapter Two: The Skin Editor
Site Frame
In Activation: Top (or Left) Bar, Administrator, the designer activates the Top (or Left) Bar of the Site Frame. The
list of objects for definition is dynamically built in the Left pane of the Activation window by double‐clicking
on the objects in the Top (or Left) bar or by clicking on the objects in the Top (or Left) bar and then by clicking
on the Add button in the Activation: Top (or Left) bar Administrator window.
Note: When selecting an object in the Left Pane list, the corresponding object in the design is automatically
selected, thereby establishing a visual bond between the List object and the Design object.
36
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
To activate the objects, carry out the following steps:
1
Double‐click on the Design object to be activated or click on the Design object and then click on Add in the
Activation dialog box; a List object appears in the Left Pane list.
2
Enter an appropriate name in place of the default name.
3
Click on the Element Type dropdown box in the Center Pane and then click on the appropriate Element
type.
Note: The list of operations in the Right Pane is updated according to the selections made.
Important: The list of operations in the Right Pane has been divided into Optional and Required.
If an item from the Required list was not activated and the designer clicks on OK or Save and
Preview, the following alert appears: “One or more required buttons were not activated. Some
features will not be functional in production”.
Tab Activation
For Tab activation, carry out the following steps:
1
Select Tab in the Element dropdown box.
2
For the Unselected Mode, edit the fonts and determine the background color.
3
For the Selected Mode, edit the fonts and determine the background color.
4
Determine whether to “Always show background” and how to align the tabs.
Customer Logo Activation
For Customer Logo activation, continue with the following step:
5
Select Customer Logo in the Element Type dropdown box.
Button/Link Activation
For Button/Link activation, continue with the following step:
6
Select Button/Link in the Element Type dropdown box; the Activated Function dropdown box appears.
Note: In the Activated Function dropdown box, be aware of the following option capabilities.
a. External Link enables setting a target external link and provides the Open in a new window option.
b. Log Out enables logging out to the Login Page or to an external URL.
7
Click on OK to save the settings.
Site Customization User Guide
37
Chapter Two: The Skin Editor
Site Frame
Default Page
Default Page enables determining the content of the Main Application window. This content can be any one of
the FreeFlow Web Services Internal pages or can be based on an external page.
To determine the content of the Main Application window, carry out the following steps:
1
Click on the Default Page button; the Default Page dialog box appears.
2
To enter an external page, click on the Use External URL radio button and enter the target URL.
3
To enter an internal page, click on the Use Internal Page radio button and select the target Internal Page
from the dropdown box.
4 Click on OK to accept the changes.
Editing the Skin
After the HTML skins have been uploaded, approved and activated, the designer has the ability, at any time,
to edit the final design.
To edit the final design, carry out the following steps:
1
To reposition images or objects, click on the target image or object and ‘drag and drop’ to new location.
2 To resize images or objects, click on the target image or object and drag the anchor points to the new
location.
3 To enter text, click on the target text location and type in the require text.
4 To edit and stylize existing text, select the existing text and carry out the changes using the tools found in
the toolbar.
Uploading Images and Objects
To upload new images and objects, carry out with the following steps:
1
To change images, click on a target image to be changed.
2 Click on the Image button in the toolbar; the Image Folder appears.
38
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the Site Frame.
4
To change additional images, repeat steps 1‐3.
5
To save and preview the new images, click on Save & Preview.
Site Customization User Guide
39
Chapter Two: The Skin Editor
Site Frame
Supervisor, Designer, User, and Super User Privileges
The Site Frame window enables editing the application according to the five privileges; these privileges
provide the various views available to the accessible operations.
Note: In order to ease maintenance and the carrying out of upgrades, it is highly recommended that the designer
limit Privilege changes to button availability and to avoid extensive changes in design.4
To edit all other Privilege views, carry out the following steps:
1
Click on an Edit Privilege: tab other than Administrator; the associated Privilege window appears (note the
instructions in the Main Application window).
2
Click on the Edit tab.
3
To incorporate the Administrator Privilege design, click on the Inherit from Administrator radio button.
4
To customize the view for this privilege only, click on the Customized for this privilege radio button.
Notes: 1. When customizing a view, it is recommended to remove non-essential images that are found in the
Administrator view.
4
Although all buttons will appear in the Site Customization application, users other than Administrators will be limited
to specific buttons, according to their privilege. In situations whereby the user clicks on a button that is not active,
according to the user’s privilege, a Warning message will appear. For further information, see Appendix: Privilege
Sensitivity, page 68
40
Site Customization User Guide
Site Frame
Chapter Two: The Skin Editor
2. Only new buttons need to be activated.
a Click on a target image and then delete; the image is deleted.
b Repeat for any non‐essential image.
5 Click on the Save and Preview tab in order to preview and save the changes to the Edit Administrator
Privilege window.
Activating the Various Elements in the Site Frame Bars
When the final design has been completed, only new buttons or links must be activated.
To activate the various elements in the Top and Left Bars of Site Frame: Supervisor, Designer, User, and Super
User, see Activating the Various Elements in the Site Frame Top and Left Bars, page 35.
Default Page
Default Page enables determining the content of the Main Application window. This content can be any one of
the FreeFlow Web Services Internal pages or can be based on an external page.
To determine the content of the Main Application window, carry out the following steps:
1
Click on the Default Page button; the Default Page dialog box appears.
2
To enter an external page, click on the Use External URL radio button and enter the target URL.
3
To enter an internal page, click on the Use Internal Page radio button and select the target Internal Page
from the dropdown box.
4
Click on OK to accept the changes.
Editing the Skin
After the HTML skins have been uploaded, approved and activated, the designer has the ability, at any time,
to edit the final design.
To edit the final design, carry out the following steps:
1
To reposition images or objects, click on the target image or object and ‘drag and drop’ to new location.
2
To resize images or objects, click on the target image or object and drag the anchor points to the new
location.
3
To enter text, click on the target text location and type in the require text.
4
To edit and stylize existing text, select the existing text and carry out the changes using the tools found
in the toolbar.
Site Customization User Guide
41
Chapter Two: The Skin Editor
Site Frame
Uploading Images and Objects
To upload new images and objects, carry out the following steps:
1
To change images, click on a target image to be changed.
2
Click on the Image button in the toolbar; the Image Folder appears.
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the Site Frame.
4
To change additional images, repeat steps 1‐3.
5
To save and preview the new images, click on Save and Preview.
42
Site Customization User Guide
e-Mail Banner
Chapter Two: The Skin Editor
e-Mail Banner
The e‐Mail Banner window enables the editing of the banner of the e‐Mail messages that are sent through the
FreeFlow Web Services system. The e‐Mail Banner window displays the original application design as a
shadowed, gray, background in order to assist in the designer’s orientation. This gray image can be selected
and temporarily deleted, and will permanently disappear when an HTML image has been uploaded.
Note: The maximum dimensions of the e-Mail Banner are as follows:
•
Width – 1000px
•
Height – unlimited
The e‐Mail Banner window is composed of the following elements:
• e‐Mail Banner Toolbar
Containing tools for emplacing and modifying text and images
• e‐Mail Banner Panel
Location for emplacing the e‐Mail banner
• e‐Mail Message Panel
Grayed‐out e‐Mail panel (for purposes of reference only)
• Edit Tab
Displays the e‐Mail Banner window with branding guidelines, for e‐Mail
Banner file emplacement
• Save and Preview Tab
Saves all editing carried out in the e‐Mail Banner window and displays
the e‐Mail Banner window without editing guidelines
Note: Save and Preview triggers an HTML parsing and re‐direction of
Site Customization User Guide
43
Chapter Two: The Skin Editor
e-Mail Banner
Image links to the Image Bank. If the image has not been placed in the
proper folder, the preview will display a ‘red X’, indicating a missing
image.
• Upload e‐Mail HTML Link
Enables uploading HTML images
• OK Button
Saves any changes made to the e‐Mail Banner window and then closes
the window
• Cancel
Closes the Edit Skins windows and cancels any changes that were carried
out in the e‐Mail Banner window
• Save
Saves any changes made to the e‐Mail Banner window, without closing
the window
e-Mail Banner Toolbar
• Editing Tools
Font selection, font size selection, font properties, cut, copy, paste, and undo/redo
• Image
Accesses the Image Folder, for inserting images into the file
• Activate
Enables defining the functionality of the controls and buttons in the design
Editing an e-Mail Banner
To edit an e‐Mail Banner, carry out the following steps:
1
Click on the Edit Privilege: e‐Mail Banner tab and then click on the Edit tab.
2
Click on the Upload e‐Mail HTML link; the Upload confirmation window appears.
3
Click on Yes to continue; the e‐Mail Banner: File Upload window appears.
44
Site Customization User Guide
e-Mail Banner
4
Chapter Two: The Skin Editor
Carry out the e‐Mail Banner: File Upload instructions, browse to the target e‐Mail Banner file and click on
Next; the e‐Mail Banner appears.
Site Customization User Guide
45
Chapter Two: The Skin Editor
e-Mail Banner
Saving and Previewing the e-Mail Banner
The Save and Preview Mode enables the designer to preview the final result without grids and table lines. The
designer can toggle between the Edit and Save and Preview options, using the Mode tabs at the bottom of each
window.
Notes: 1. When clicking on the Save and Preview tab, all changes to the specific window are automatically
saved.
2. Buttons are not active for testing purposes (buttons respond to clicking accessing the Disabled Mouse
Clicks message box).
1
After the upload process has been completed, click on Save and Preview; a preview of the new application
view appears.
Note: Any missing images will be marked with the
Error icon.
Activating the Various Elements in the e-Mail Banner
When the final design has been completed, each button or link must be activated, whereby an action and
definition of the rules for each button or link is assigned.
To activate the various elements in the e‐Mail Banner, continue with the following step:
1
In the e‐Mail Banner toolbar, click on the Activate button, the Activation window appears.
Note:
The Activation window is divided into the following three panes:
• Left Pane, which displays the dynamic list of objects (images or texts) for activation
• Center Pane, which displays the Editor instructions
• Right Pane, the Reporting pane, which displays the list of required and optional buttons for
activation
46
Site Customization User Guide
e-Mail Banner
Chapter Two: The Skin Editor
In Activation: e‐Mail Banner, the designer activates the customer logo.
Note: When selecting an object in the Left Pane list, the corresponding object in the design is automatically
selected, thereby establishing a visual bond between the List object and the Design object.
To activate the customer logo, carry out the following steps:
1
In the e‐Mail Banner, double‐click on the customer logo or click on the customer logo and then click on
Add in the Activation: e‐Mail Banner Left Pane; a List object appears in the Left Pane list.
2
Enter an appropriate name in place of the Object Name field.
3
Click on the Element Type dropdown box in the Center Pane and then click on the appropriate Element
type.
Note: The list of operations in the Right Pane is updated according to the selections made.
Important: The list of operations in the Right Pane has been divided into Optional and Required.
If an item from the Required list was not activated and the designer clicks on OK or Save and
Preview, the following alert appears: “One or more required buttons were not activated. Some
features will not be functional in production”.
4
Click on OK to save the settings.
Site Customization User Guide
47
Chapter Two: The Skin Editor
e-Mail Banner
Editing the Skin
After the HTML skins have been uploaded, approved and activated, the designer has the ability, at any time,
to edit the final design.
To edit the final design, carry out the following steps:
1
To reposition images or objects, click on the target image or object and ‘drag and drop’ to new location.
2
To resize images or objects, click on the target image or object and drag the anchor points to the new
location.
3
To enter text, click on the target text location and type in the require text.
4
To edit and stylize existing text, select the existing text and carry out the changes using the tools found
in the toolbar.
Uploading Images and Objects
To upload new images and objects, carry out the following steps:
1
To change images, click on a target image to be changed.
2
Click on the Image button in the toolbar; the Image Folder appears.
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the e‐Mail Banner.
4
To change additional images, repeat steps 1‐3.
5
To save and preview the new images, click on Save & Preview.
48
Site Customization User Guide
Catalog Banner
Chapter Two: The Skin Editor
Catalog Banner
The Catalog Banner window enables the branding of the banner of the Catalog messages that are sent through
the FreeFlow Web Services system. The Catalog Banner window displays the original application design as a
shadowed, gray, background in order to assist in the designer’s orientation. This gray image can be selected
and deleted, and will disappear when a ‘real’ HTML image has been uploaded.
Note: The maximum dimensions of the Catalog Banner are as follows:
•
Width – 1000px
•
Height – 100px
The Catalog Banner window is composed of the following elements:
• Catalog Toolbar
Containing tools for emplacing and modifying text and images
• Catalog Banner Panels
Location for emplacing the Catalog banner
• Catalog Message Panel
Grayed‐out Catalog panel (for purposes of reference only)
• Edit Tab
Displays the Catalog Banner window with editing guidelines, for text and
image emplacement
• Save and Preview Tab
Saves all editing carried out in the Catalog Banner window and displays
the Catalog Banner window without editing guidelines
Site Customization User Guide
49
Chapter Two: The Skin Editor
Catalog Banner
Note: Save and Preview triggers an HTML parsing and re‐direction of
Image links to the Image Bank. If the image has not been placed in the
proper folder, the preview will display a ‘red X’, indicating a missing
image
• Upload e‐Mail HTML Link
Enables uploading HTML images
• OK Button
Saves any changes made to the Catalog Banner window and then closes
the window
• Cancel
Closes the Edit Skins windows and cancels any changes that were carried
out in the Catalog Banner window
• Save
Saves any changes made to the Catalog Banner window, without closing
the window
Catalog Banner Toolbar
• Editing Tools
Font selection, font size selection, font properties, cut, copy, paste, undo/redo
• Image
Accesses the Image Folder, for inserting images into the file
• Activate
Enables defining the functionality of the controls and buttons in the design
Editing a Catalog Banner
To edit a Catalog Banner, carry out the following steps:
1
Click on the Catalog Banner tab and then click on the Edit tab.
2
Click on the Upload Catalog HTML link; the Upload confirmation window appears.
3
Click on Yes to continue; the Catalog Banner: File Upload window appears.
50
Site Customization User Guide
Catalog Banner
4
Chapter Two: The Skin Editor
Carry out the Catalog Banner: File Upload instructions, browse to the target Catalog Banner file and click on
Next; the Catalog Banner appears.
Site Customization User Guide
51
Chapter Two: The Skin Editor
Catalog Banner
Saving and Previewing the Catalog Banner
The Save and Preview Mode enables the designer to preview the final result without grids and table lines. The
designer can toggle between the Edit and Save and Preview options, using the Mode tabs at the bottom of each
window.
Note: When clicking on the Save and Preview tab, all changes to the specific window are automatically saved.
All buttons are active for testing purposes. The main application window is not shown and the buttons will
respond to the clicks by changing the view.
1
After the upload process has been completed, click on Save and Preview; a preview of the new application
view appears.
Note: Any missing images will be marked with the
Error icon.
Activating the Various Elements in the Catalog Banner
When the final design has been completed, each button or link must be activated, whereby an action and
definition of the rules for each button or link is assigned.
To activate the various elements in the Catalog Banner, continue with the following steps:
1
In the e‐Mail Banner toolbar, click on the Activate button, the Activation window appears.
Note:
The Activation window is divided into the following three panes:
• Left Pane, which displays the dynamic list of objects (images or texts) for activation
• Center Pane, which displays the Editor instructions
• Right Pane, the Reporting pane, which displays the list of required and optional buttons for
activation
52
Site Customization User Guide
Catalog Banner
Chapter Two: The Skin Editor
In Activation: Catalog Banner, the designer activates the customer logo.
Note: When selecting an object in the Left Pane list, the corresponding object in the design is automatically
selected, thereby establishing a visual bond between the List object and the Design object.
To activate the customer logo, carry out the following steps:
1
In the Catalog Banner, double‐click on the customer logo or click on the customer logo and then click on
Add in the Activation: Catalog Banner Left Pane; a List object appears in the Left Pane list.
2
Enter an appropriate name in place of the Object Name field.
3
Click on the Element Type dropdown box in the Center Pane and then click on the appropriate Element
type.
Note: The list of operations in the Right Pane is updated according to the selections made.
Important: The list of operations in the Right Pane has been divided into Optional and Required.
If an item from the Required list was not activated and the designer clicks on OK or Save and
Preview, the following alert appears: “One or more required buttons were not activated. Some
features will not be functional in production”.
4
Click on OK to save the settings.
Site Customization User Guide
53
Chapter Two: The Skin Editor
Catalog Banner
Editing the Skin
After the HTML skins have been uploaded, approved and activated, the designer has the ability, at any time,
to edit the final design.
To edit the final design, carry out the following steps:
1
To reposition images or objects, click on the target image or object and ‘drag and drop’ to new location.
2
To resize images or objects, click on the target image or object and drag the anchor points to the new
location.
3
To enter text, click on the target text location and type in the require text.
4
To edit and stylize existing text, select the existing text and carry out the changes using the tools found
in the toolbar.
Uploading Images and Objects
To upload new images and objects, continue with the following steps:
1
To change images, click on a target image to be changed.
2
Click on the Image button in the toolbar; the Image Folder appears.
3
Select an appropriate image and click on Select Image or carry out the Image Folder instructions and then
click on Select Image; the new image appears in the Catalog Banner.
4
To change additional images, repeat steps 1‐3.
5
To save and preview the new images, click on Save and Preview.
54
Site Customization User Guide
Style Sheet
Chapter Two: The Skin Editor
Style Sheet
The Style Sheet enables the designer to edit the fonts, buttons and colors of each window in the FreeFlow Web
Services system in order to complete the unique design of the application. The Style Sheet is composed of the
following elements:
• Editing Sub‐panels
• Control Buttons
• Preview Pane
Note: Style Sheet settings apply to all privileges.
Editing Sub-panels
The Style Sheet identifies the various application design elements and displays them in the following sub‐
panels:
• Color Palette
Which enables editing the colors of the various windows
• Buttons
Which enables downloading prepared Button images from the Image folder
Note: An exception to this rule is with buttons such as Delete, whereby the button
color can be edited
• Fonts
Which allows editing font type, style, size and color
Site Customization User Guide
55
Chapter Two: The Skin Editor
Style Sheet
Color Palette
To change a window color, carry out the following steps:
1
Click on a target element; the Color Selection dialog box appears.
2
Click on a target color or enter the appropriate RGB Color Editor numbers; the new color appears in the
Selected Color box.
Note: When using the RGB Editor, entered numbers cannot exceed 255.
3
Click on OK; the new color appears in the Color Palette sub‐panel.
4
Repeat steps 1‐3 for all other elements that must be edited.
56
Site Customization User Guide
Style Sheet
Chapter Two: The Skin Editor
Buttons
To change a Button image, carry out the following steps:
1
Click on a target button; the Image Folder dialog box appears.
Site Customization User Guide
57
Chapter Two: The Skin Editor
Style Sheet
Note: The target button name appears as selected in the Image Name list and the Button image is displayed
in the Image pane.
2
Click on the new Image name and then click on Select Image; the new image appears in the Buttons sub‐
panel.
3
Repeat steps 1‐3 for all other buttons that must be edited.
58
Site Customization User Guide
Style Sheet
Chapter Two: The Skin Editor
Note: The Regular and Dark buttons have text that is independent of the background image, whereas the
Delete button has text that is independent of the background color. In both cases, the text is edited
from the Font sub-panel.
Site Customization User Guide
59
Chapter Two: The Skin Editor
Style Sheet
Fonts
To change a Font style, carry out the following steps:
1
Click on a target font; the Fonts dialog box appears.
2
Click on the appropriate Font type and style and enter the appropriate size (in either px or pt).
3
To change the Font color, click on the Color box; the Color Selection dialog box appears.
60
Site Customization User Guide
Style Sheet
4
Chapter Two: The Skin Editor
Click on a target color or enter the appropriate RGB Color Editor numbers; the new color appears in the
Selected Color box.
Note: When using the RGB Editor, entered numbers cannot exceed 255.
5
Click on OK; the new color appears in the Color Palette sub‐panel.
6
Repeat steps 1‐6 for all other elements that must be edited and then click on OK in the Fonts dialog box.
Control Buttons
The Style Sheet includes the following buttons, which enable the designer to save, cancel and preview any
changes carried out to the application elements:
Button
Update
Preview
OK
Description
Saves the changes carried out in the Editing sub‐panels and displays the changes in the
Preview pane.
Saves the changes carried out in the Editing sub‐panels and then closes the Style Sheet
window.
Cancel
Closes the Style Sheet window and cancels out any changes carried out in the Editing sub‐
panels.
Save
Saves the changes carried out in the Editing sub‐panels without closing the Style Sheet
window. Note: To preview the changes in the Preview pane, right‐click on the Style Sheet
window and then click on Refresh.
Site Customization User Guide
61
Chapter Two: The Skin Editor
Style Sheet
Preview Pane
All changes carried out in the Editing sub‐panels can be viewed in the Preview pane. To view these changes,
carry out the following steps.
1
After each change to an application element (or after several changes), click on the Update Preview
button; the changes immediately appear in the Preview pane.
The Branded Site: Login
62
The Branded Application
Site Customization User Guide
Chapter Three:
Appendix
Chapter Three: Appendix
Site Customization Installation Guide
1
You must activate Site Customization through the appropriate license.
2
If Site Customization is not activated (note the checkmark next to Branding) contact your Xerox Support
Center for instructions.
Note: The successful installation of Site Customization will be noted as Branding in the Version Information dialog
box, accessed through the Version link located in the Local System Messages pane of the Print Provider
Info Center.
Site Customization User Guide
65
Chapter Three: Appendix
Converting HTML pages to .mht files
To convert the HTML page to an .mht file, carry out the following steps:
1
Open the web page in Microsoft Internet Explorer.
2
Click on File > Save As... ; the Save As window appears.
3
In the Save as type dropdown box, click on Web Archive, single file (*.mht).
4
Click on Save.
The Customer Preferences Panel
In order for a Print Buyer to receive a skin, the Print Provider must carry out the following steps:
1
On the Print Provider side, click on Management / Customers / Preferences; the Preferences panel appears.
2
Click on the target customer, click on the Skins dropdown box and then click on the target skin.
3
Enter a path to the skin into the Access path.
Note: In order to enable a Print Buyer access to a specific skin, the Print Provider must enter an Access
Path for that skin. This path will then be provided to the Print Buyer.
The same skin can be provided to more than one Print Buyer. However, by providing different Access
Paths to different Print Buyers, the Print Provider can provide each Print Buyer with a customized
version of the same skin.
4
66
Click on OK in the Preference panel to save the settings.
Site Customization User Guide
Chapter Three: Appendix
Image Management - Download
You can select multiple files to export for editing purposes
The following points describe for this procedure:
• The images are multi‐selected from the Images list and the Download button
is selected
• The system will create a .Zip file that can be opened or saved to a location for editing
• Once edited, the image is re‐uploaded into the Image Bank.
Site Customization User Guide
67
Chapter Three: Appendix
Privilege Sensitivity
The Site Customization application buttons are ‘privilege sensitive’ whereby the application does not allow a
user who has logged in using a lower permission, to access an operation (use a button) of higher permission.
This is different from the way the FreeFlow Web Services system is currently designed, whereby permissions
are restricted by the ‘absence’ of buttons from the GUI. The access permission decision will be made based
on a scan of the next window’s permission; that is, whether or not the current user’s privilege allows usage
of the window that is opened as a result of a click on the this button.
68
Site Customization User Guide
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertisement