Epicor 9 Styling and Themes Course 9.05.600
Disclaimer Copyright © 2010 by Epicor Software Corporation. All rights reserved. Printed in the United States of America. No part of this publication may be reproduced in any form without the prior written consent of Epicor Software Corporation. Epicor, Vantage, and Vista are registered trademarks of Epicor Software Corporation. All other trademarks are property of their respective owners. Microsoft product screen shots reprinted with permission from Microsoft Corporation. Epicor Software Corporation makes no representations or warranties with respect to the contents of this document and specifically disclaims any implied warranties of merchantability, satisfactory quality or fitness for any particular purpose. The contents of this document are believed to be current and accurate as of its date of publication. Changes to this document between reprintings and other important information about the software product are made or published in release notes, and you are urged to obtain the current release notes for the software product. We welcome user comments and reserve the right to revise this publication and/or make improvements or changes to the products or programs described in this publication at any time without notice. The usage of any Epicor Software shall be pursuant to an Epicor end user license agreement and the performance of any consulting services by Epicor personnel shall be pursuant to Epicor's standard services terms and conditions.
EDE8928905 90521-905-9290-583600B 9.05.600
TOC | 3
Contents Styling and Themes Course....................................................................................................5 Before You Begin....................................................................................................................6 Audience.........................................................................................................................................................6 Prerequisites....................................................................................................................................................6 Environment Setup..........................................................................................................................................6 Workshop Constraints..............................................................................................................................7
Styling and Themes Overview...............................................................................................8 Terms and Concepts........................................................................................................................................8 Styling - Load Style Theme...............................................................................................................................9 Workshop - Establish Styling Rights and Load Themes.............................................................................10 Review Styling Rights.......................................................................................................................10 Load a Style Theme.........................................................................................................................10
Styling - Runtime Styler.......................................................................................................11 Runtime Styler - Primary Controls...................................................................................................................12 Set Controls for the Style Library.............................................................................................................12 Set Control for the StyleSets...................................................................................................................12 Runtime Styler - Resources.............................................................................................................................13 Workshop - Introduce the Runtime Styler................................................................................................14 Use the Style Library........................................................................................................................14 Add a StyleSet.................................................................................................................................14 Manage StyleSets............................................................................................................................14 Add a Resource...............................................................................................................................15 Manage Resources..........................................................................................................................15 Import Resources.............................................................................................................................16
Runtime Styler - Roles..........................................................................................................17 Runtime Styler - UI Roles................................................................................................................................17 Workshop - Use UI Roles.........................................................................................................................18 Open UI Role Settings......................................................................................................................18 Set Up Background..........................................................................................................................18 Set Up Border..................................................................................................................................19 Set Up Font.....................................................................................................................................19 Set Up Image...................................................................................................................................20 Set Up Other Parameters.................................................................................................................20 Use the Resources and Preview Sections..........................................................................................21 Set Up Properties.............................................................................................................................21 View UI Role Components...............................................................................................................22 Access UI Role Settings From the Program.......................................................................................22 Runtime Styler - Component Role Settings.....................................................................................................22 Workshop - Set Up Component Role......................................................................................................24 Open the Component Role Settings.................................................................................................24
Epicor 9 | 9.05.600
4 | Styling and Themes Course Modify the Common Properties.......................................................................................................24 Modify the Specific Component Properties .....................................................................................24 Runtime Styler - Shared Object Role Settings..................................................................................................25 Workshop - Set Up Shared Object Role...................................................................................................26
Styling - Style Filter Management.......................................................................................27 Workshop - Use Style Filtering........................................................................................................................28 Create a Child Style Filter........................................................................................................................28 Modify a Child Style Filter.......................................................................................................................29 View the Result for Supplier Maintenance...............................................................................................29 View the Result for Ship Via Maintenance ..............................................................................................29
Styling - Style Tracking.........................................................................................................30 Workshop - Use Style and Theme Tracking.....................................................................................................31
Styling - Theme Maintenance..............................................................................................32 Workshop - Use Theme Maintenance.............................................................................................................33 Import and Upload Themes.....................................................................................................................33 Delete Theme.........................................................................................................................................33 Set Default Theme..................................................................................................................................33
Case Study.............................................................................................................................35 Workshop - Case Study..................................................................................................................................36 Create the Style Library...........................................................................................................................36 Define Component Role Settings............................................................................................................36 Define UI Role Settings...........................................................................................................................36 Select and Size the Image.......................................................................................................................37 Save the Styling Globally.........................................................................................................................37 Modify Hot-Tracked State.......................................................................................................................38 Modify Pressed State..............................................................................................................................38 Save the Style Library..............................................................................................................................39 Set the Style Library As Default...............................................................................................................39 View the Theme.....................................................................................................................................40 Remove Theme.......................................................................................................................................40
Conclusion.............................................................................................................................41
Epicor Software
Styling and Themes Course | 5
Styling and Themes Course The Styling and Themes functionality gives you complete control over the look and feel of the entire user interface (UI). Set this tool to display a pre-built design or theme and access it from the options installed with the Epicor application. Use this tool to edit an existing theme and create a new theme. Styling and Themes allows modification to items from three main categories – UI Roles, Component Role Settings, and Shared Object Role Settings. The differences between these categories are explained later in this course. Upon successful completion of this course, you will be able to: • Correctly configure the user rights and privileges to access Styling and Themes. • Accurately import needed resources used in themes. • Understand how to manipulate UI roles, component roles, and shared UI objects to create and edit themes. • Apply filters to accurately deploy styles and themes. • Use style tracking to effectively manage styles and themes. • Deploy themes through Theme Maintenance.
Epicor 9 | 9.05.600
6 | Styling and Themes Course
Before You Begin Read this topic for information you should know in order to successfully complete this course.
Audience Specific audiences will benefit from this course. • System Administrator • IT/Technical Staff
Prerequisites In order to complete the workshops in this course, all necessary modules must be licensed and operating in your training environment. For more information on the modules available, contact your Epicor Customer Account Manager
[email protected]. It is also important that you understand the prerequisite knowledge contained in other valuable courses. • Navigation Course - This course introduces navigational aspects of the Epicor application's user interface. Designed for a hands-on environment, general navigation principles and techniques are available at each of the interface levels in the Epicor application - system, module, and program. Workshops focus on each of these levels and guide you through each navigational principle introduced. • Personalization Course - This course covers how to personalize the Epicor application by adjusting the views, options, and toolbars to best suit your business needs. This course focuses on the personalization tools available to all users, regardless of security privileges. • Recommended: Embedded Customization Course - This course covers all aspects of the customization model which is built into the framework for Epicor 9 and beyond. Users may personalize their environment if given the authority. This course goes beyond the personalization aspects to allow system administrators to deploy standard customizations based on their specific business requirements. This includes adding and removing data elements, modifying component properties, adding VBScript "code points" to run before and after data field modifications, and much more.
Environment Setup The environment setup steps and potential workshop constraints must be reviewed in order to successfully complete the workshops in this course. Your Epicor training environment, in which the Epicor demonstration database is found, enables you to experience Epicor functionality in action but does not affect data in your live, production environment. The following steps must be taken to successfully complete the workshops in this course.
Epicor Software
Before You Begin | 7 1.
Verify the following or ask your system administrator to verify for you: • Your Epicor training icon (or web address if you are using Epicor Web Access) points to your Epicor training environment with the Epicor demonstration database installed. Do not complete the course workshops in your live, production environment. Note It is recommended that multiple Epicor demonstration databases are installed. Contact Support or Systems Consulting for billable assistance. • The Epicor demonstration database is at the same service pack and patch as the Epicor application. Epicor's education team updates the Epicor demonstration database for each service pack and patch. If your system administrator upgrades your Epicor application to a new service pack or patch, he or she must also download the corresponding Epicor demonstration database from EPICweb > Support > Epicor > Downloads and install it. If this is not performed, unexpected results can occur when completing the course workshops. • Your system administrator restored (refreshed) the Epicor demonstration database prior to starting this course. The Epicor demonstration database comes standard with parts, customers, sales orders, and so on, already defined. If the Epicor demonstration database is shared with multiple users (that is, the database is located on a server and users access the same data, much like your live, production environment) and is not periodically refreshed, unexpected results can occur. For example, if a course workshop requires you to ship a sales order that came standard in the Epicor demonstration database, but a different user already completed this workshop and the Epicor demonstration database was not restored (refreshed), then you will not be able to ship the sales order. Epicor's education team has written the course workshops to minimize situations like this from occurring, but Epicor cannot prevent users from manipulating the data in your installation of the Epicor demonstration database.
2.
Log into the training environment using the credentials manager/manager. If you are logged into your training environment as a different user, from the Options menu, select Change User.
3.
From the Main menu, select the company Epicor USA (EPIC03). Company Epicor Financials Co. (EPIC02) is also used in this course.
4.
From the Main menu, select the Main Plant.
Workshop Constraints Due to the ability to modify the appearance of the entire user interface, this course is not recommended to be completed in a shared database. For the purpose of this course and the training environment, it is important to follow all of the steps provided in each workshop. While this course provides education on creating various styles and themes, it is essential that all created themes are disabled or removed. Disabling or removing the themes ensure the appropriate default training environment is available globally.
Epicor 9 | 9.05.600
8 | Styling and Themes Course
Styling and Themes Overview The Styling and Themes functionality gives you complete control over the look and feel of the entire user interface (UI). Set this tool to display a pre-built design or theme and access it from the options installed with the Epicor application. Use this tool to edit an existing theme and create a new theme. Use the styling functionality to manipulate the look of each item or component within the interface, including buttons, check boxes, and fields. It gives you complete control over the look of each component, as you can update the different states in which they display. For example, you can create multiple button states - normal, selected, or pressed – in a graphics program and then add these various states as the default look for all buttons within the Epicor application. Since you are updating one user interface definition, or UI role, the changes you make are displayed globally throughout the interface. Your updated or new theme can then be made available to everyone within your organization. This tool set contains export and import functions so you can pass along your revised or new theme to anyone. Use the styling functionality to create a user interface that is unique to your company, departments, or users. By refining the look of existing themes or creating new themes, you can transform the Epicor application to display an entirely different look and feel.
Terms and Concepts This topic covers some of the essential terms and concepts relating to the styling and themes functionality. • Style - This refers to the individual modifications performed on a UI control. For example, creating a gradient for all buttons on the Main menu would be a button style. Changing the font size for items within a list view would constitute a different style. • StyleSet - This is a reusable collection of styles that can be applied at different levels. For example, a styleset is created when a child style filter is added based on a plant or company. The styles within that styleset only display when that plant or company is used. (See Filtering below). • Themes - These are an aggregation of several styles with the purpose of creating a specific look and feel within the Epicor application. Themes generally reflect an organization's established corporate or marketing styles. • Library - This is a collection of themes. • Filtering - This allows deployment of specific styles based on several filter types, including company, plant, application, or language. When you create a filter based on one of these types, a styleset (see Styleset above) is created within a parent theme. The styles visible in the styleset are only visible when the filter type is active (the company or language on which the filter relies is in use). • UI Role - This refers to any of the individual controls added to a user interface. UI roles encompass all the objects seen on the application screens including buttons, grids, text boxes, numeric editors, group boxes, and labels. The Epicor application interface is made up of both Microsoft® and Infragistics® components. • Component Role Settings - These apply to a variety of global settings that you apply to the UI roles. While you apply individual changes, such as background color and font size, to the UI role directly, certain settings, such as the order in which a component is rendered on the screen or preferences regarding the order in which themes are applied by the operating system, can be determined by adjusting the component role settings. • Runtime Styler - This is the main tool for creating new styles. It is a panel that contains information about the current theme and stylesets used as tree view representations of all the individual UI roles and component role settings.
Epicor Software
Styling and Themes Overview | 9
Styling - Load Style Theme Quickly preview and edit the look of the interface by loading in any pre-built, new, or updated theme. To do this use Load Style Theme. Important To determine the active theme, select Help - About Epicor and then select System Info. One of the traits of the system is the Active Theme.
Epicor 9 | 9.05.600
10 | Styling and Themes Course
Workshop - Establish Styling Rights and Load Themes This workshop demonstrates how to establish styling rights and load themes.
Review Styling Rights Navigate to User Account Maintenance. Menu Path: System Management > Company Maintenance > User 1. In the User ID field, search for and select MANAGER. 2. Navigate to the Security sheet. 3. Verify the Can Maintain Themes check box is selected. 4. Exit User Account Maintenance. The selected user can access the styling features. If you assign styling rights to the user, the next time this user logs into the Epicor application, the styling features are available on the Options menu from the Main menu.
Load a Style Theme 1. From the Options menu, select Styling > Load Style Theme. The Open window displays. This window automatically defaults to the Styles folder. This folder contains all the default themes available for the Epicor application. 2. Select the Office2007.isl theme. Notice that all the themes use the .isl file extension. It is recommended to use the ...\Epicor Software\EpicorXXX\client\Styles folder (where XXX is Epicor version) to save themes. 3. Click Open. The interface displays using the theme selected.
Epicor Software
Styling - Runtime Styler | 11
Styling - Runtime Styler The primary tool of the Styling and Themes functionality is the Runtime Styler. This tool allows you to change the appearance of every component within the user interface. You can see this change immediately, as the interface updates while the Epicor application runs. This helps you decide if you like, or do not like, the change to the interface. Use this tool to modify an existing theme or create an entirely new theme. Then use this theme for client installation and make it available to other users within your company. The Epicor application runs in two modes – Run Mode (or Runtime) and Developer Mode. Typically, you use the Epicor application in Run Mode, which means you use the Epicor application’s sheets for normal activities like data entry and processing. The Runtime Styler operates in Run Mode and allows you to see the Epicor application style editing in process. Developer Mode suspends the normal operation of the program in order to customize it. The styling features are never used in Developer Mode. The Runtime Styler divides the user interface items into three main categories – UI Roles, Component Role Settings, and Shared Object Role Settings. Each of these categories has various properties and options that you can manipulate as needed. The Runtime Styler is a third party application published by Infragistics, Inc. For more information, see their website at www.infragistics.com. Launch the Runtime Styler Here is how you launch the Runtime Styler: 1.
From the Main Menu, click on the Options menu.
2.
Highlight the Styling sub-menu.
3.
Select the Runtime Styler command.
4.
The Runtime Styler displays next to the Main Menu.
You can now use this program to update or create new themes.
Epicor 9 | 9.05.600
12 | Styling and Themes Course
Runtime Styler - Primary Controls Use the Runtime Styler controls to create a new theme, load an existing theme and manage the default styling on specific components.
Set Controls for the Style Library The Style Library is displayed in the top section of the Runtime Styler. The Style Library indicates which theme is currently loaded. All the theme files use the .isl extension. Primary controls include the following: • New button - Click to create a new theme. • Load button - Click to update an existing theme. • Save As button - Click to create a copy of the current theme. • Save button - Click to record your changes to a current theme. • Show/Hide Property Panel button - Click to toggle the display of the Property Panel. The Property Panel displays different items based on the selected setting, component or UI role. • Update Mode tab - Click the tab to set how the interface will refresh itself after you make changes to the current theme. The Runtime Styler is set to immediately update the interface; you cannot change this value.
Set Control for the StyleSets The StyleSet section is displayed in the middle of the Runtime Styler. StyleSets define the base look and feel of each interface component. Much like a cascading style sheet determines the look and feel of an .html page, a StyleSet determines the original overall look contained within the selected theme. You can then change the baseline look of each component through the Runtime Styler. Primary controls include the following: • Manage StyleSets button - Click to open the StyleSet Manager. • Add New button - Click to create a new StyleSet that will be added to the current Style Library (theme). It will be called New StyleSet – followed by an incremented number. • Remove button - Click to delete the current StyleSet from the library. You are asked to confirm this action; click Yes. • Make Default button - If you wish to change the default StyleSet used by the current theme, select the StyleSet option you want from the Existing StyleSets list. Click the Make Default button. The StyleSet will now be displayed in bold text followed by this word: (Default) • StyleSet Name field - Change this field if you want to change the current StyleSet name. • Based On list - Select an option from this drop-down list to use one StyleSet as the foundation for a new StyleSet. For example, if you want StyleSet 1 to be based on StyleSet 2, it means that StyleSet 1 will use all of StyleSet 2’s component styles – unless this styling is changed within StyleSet 1. • Control Defaults list - Use this list to select a style for a specific component. To do this, select the check box next to the component. This style will now become the default for this component within the current theme. Only one
Epicor Software
Styling - Runtime Styler | 13 default style can be defined for each component, so if you select a component that already has one, you will be asked if you want to change it. When you finish working on the StyleSets, click OK.
Runtime Styler - Resources Resources are containers of style information that you can use within themes. A resource can be any item you create or add to a theme, like a gradient or a graphic file. Each resource can then be applied to a UI Role. The Runtime Styler allows you to import and export various resources (graphics, colors, and other settings) that you can use with your themes. You can then incorporate these resources into any role on the user interface that you need.
Epicor 9 | 9.05.600
14 | Styling and Themes Course
Workshop - Introduce the Runtime Styler This workshop displays some of the main controls within the Runtime Styler. Use controls to create a new theme, load an existing theme, and manage the default styling on specific components.
Use the Style Library The Style Library indicates which theme is currently loaded. Files for themes all use the .isl file extension. 1. From the Options menu, select Styling > Runtime Styler. 2. Click Load. 3. Select the Office2007Calibri.isl theme. 4. Click Open. 5. Click Save As. 6. In the File name field, enter EpicorXXX (where XXX are your initials). 7. Click Save. 8. Load the EpicorXXX.isl theme (where XXX are your initials).
Add a StyleSet 1. Click Add to add a new StyleSet. The StyleSet Manager displays. The new style set is added to the current Style Library (theme). It is called New StyleSet followed by an incremented number. 2. In the Based On field, select Default. The Control Defaults list allows selecting a style for a specific component. To do this, select the check box next to the component. This style now becomes the default for this component within the current theme. Only one default style can be defined for each component, so if a component is selected that already has one; a prompt displays asking if it should be changed. 3. Click Add New to create a new style set. 4. In the Based On field, select Default. 5. Click OK. The StyleSet Manager closes.
Manage StyleSets 1. Click Manage StyleSets. 2. In the Existing StyleSets list, click New StyleSet 2 to highlight it.
Epicor Software
Styling - Runtime Styler | 15 3. Click Remove. 4. In the Delete StyleSet? window, click Yes to delete the selected style set. 5. In the Existing StyleSets list, click New StyleSet 1 to highlight it. 6. Click Make Default. The StyleSet is displayed in bold text followed by the word Default. 7. Click OK.
Add a Resource 1. Navigate to the Resources sheet. 2. Click Add new to create a new resource. Use the commands under the Copy From sub-menu on the context menu to create a new resource created from another source. After you add a resource to the current Style Library, it is labeled as New Resource 0, New Resource 1, and so on. The Properties panel opens. 3. Exit the properties panel.
Manage Resources 1. To duplicate a resource, right-click the Default_EpiForm resource and select Create Copy. The Copy of Default_EpiForm resource displays in the list. 2. To remove a resource, right-click the Default_EpiForm resource and select Remove. 3. In the Delete Resource? window, click Yes to delete the selected resource. 4. To rename the resource, right-click the New Resource 0 and select Rename. 5. Enter XXX Resource (where XXX are your initials). 6. Click outside the field. 7. Click the More Buttons icon. 8. Click Export to save this resource list as a separate file to export the resource list. The Save Style Library displays. The default file name for the exported theme is XXX Exported Resources.isl (where XXX are your initials). 9. Click Save.
Epicor 9 | 9.05.600
16 | Styling and Themes Course
Import Resources 1. On the Resources sheet, click Import. The Open Style Library window displays. 2. Select the Office2007Calibri.isl file that contains the resources to import and click Open. The Select Resources window displays. 3. Click Deselect All to clear the default selection. 4. Hold Ctrl and click Default_EpiForm and Default_EpiShape_Global resources. To import a single resource, highlight the resource from the list. To select a range of resources, hold down Shift and select the first and the last resources of the range. To select a specific multiple resources, hold down Ctrl and click the specific resources you want to import. 5. Click OK. The opened theme was copied from the Office2007Calibri.isl theme. The Default_EpiForm resource was deleted and can now be imported. The imported Default_EpiShape_Global resource has the same name as a resource currently used in the opened theme. The Resource Name Conflict window displays. 6. Click Skip. To resolve the name conflict, click one of the available buttons: • Rename • Rename All • Replace • Replace All • Skip • Cancel 7. Click Save.
Epicor Software
Runtime Styler - Roles | 17
Runtime Styler - Roles Use the Runtime Styler to update the styles of specific components through the Roles sheet. To do this, use the Roles tree view to navigate through all the components on the user interface. Use this tree view to launch the Properties panel for each UI Role and make detailed appearance changes on each role. Roles use an inheritance feature to help you make global changes to a theme. When making a change to a base role, this change is passed along to all the components that use this base role. For example, each base role contains a default background resource; you can change the color on this resource. This causes all the components which use this base role to display using the same background color. You can, however, override this inherited styling on specific components. This allows you to create an overall style for your theme, but then add variations as needed. To override styling from a base role, set the component’s UseOSThemes property to False.
Runtime Styler - UI Roles A UI Role is a category that defines the overall look for buttons, labels, radio options, or any other component on the user interface. You change the look of each UI Role through the Runtime Styler. These changes display on any component that uses the UI Role. UI Roles have a parent-child relationship organized through a tree view. Any property changes made to a UI Role that has a higher node within the tree causes other UI Roles beneath it to display the same changes. If you make a change on a child UI Role, however, this change will not override the settings defined on the parent UI Role. This allows you to create unique styles for specific components.
Epicor 9 | 9.05.600
18 | Styling and Themes Course
Workshop - Use UI Roles This workshop demonstrates how to use UI Roles.
Open UI Role Settings 1. Navigate to the Roles sheet. 2. In the Filter by Control field, select UltraButton to reduce the number of UI Roles displayed. The tree view has only the UltraButtonBase role and its child roles. 3. In the tree view, navigate to UI Roles > Base > Button > UltraButtonBase > UltraButton > UltraButtonDefault. 4. Select the UltraButtonDefault role. The Properties panel displays. For this example, the panel is labeled: Settings for ‘UltraButtonDefault’.
Set Up Background The Background options define how the current state’s background displays including fill color, image (if used), disabled color, and alpha level. Note The Preview section shows how the button Enabled and Disabled states look in normal and 3D states.
1. Verify the Common States > Normal sheet is displayed. The UltraButtonDefault role has a Normal state, a HotTracked (highlighted) state, and a Pressed state. You can edit the settings of each state as needed. Note The bottom toolbar divides the state’s settings into Background, Border, Font, Image, and Other groups.
2. In the Background section, verify the Type field is set to Solid. Use the Type button to define the solid, gradient, or hatch pattern type displayed. When selecting this button, a list displays; select the gradient or hatch pattern type of your choice. 3. Click Fill and select the background color. Use the Fill button to indicate the main color displayed for the background of the state. When you select either a gradient or a hatch pattern, two Fill buttons display and you can define two colors used for the background gradient or pattern. 4. Review the Background Image section. Use the Image and Disabled Image buttons to select the image for the button. To substitute an image for the state’s background, click Image and select File. The Open File window allows you to find and select the image file displayed. If no main image is available, indicate a second image to display. To define this image, click Disabled Image to find and select this backup image from the Open File window. 5. Review the Layout Mode field options.
Epicor Software
Runtime Styler - Roles | 19 The available options are: • Centered - This places the image in the middle of any component that uses this state. • Stretched - This pulls the image across the component. If you select the stretched mode, the Margins button is displayed. Click Margins to display the Stretch Margins Editor. Use the Top, Right, Bottom, and Left values to define the margins, in pixels, for the image. • Tiled - This causes no resizing, however, multiple versions of the image display through a series of tiles to fill the entire component's area. 6. Review the Image Alpha field options to determine the opacity/transparency of the image. The available options are: • UseAlphaLevel - This uses the Alpha Level defined on the Other section of the Properties panel. • Opaque - This displays the image exactly as it normally displays. • Transparent - This displays a level of transparency. 7. Click Disabled fill button(s) and select the color used when the default color is not available. If the background Type is gradient or hatch, a second Disabled Fill button becomes available. Use this button to select a second color used when the second gradient or hatch pattern color is not available. 8. Review the Alpha field options for the background fill colors display. The available options are the same as those for the Image Alpha field.
Set Up Border 1. Click the first Border button and select the first border color. The Color Picker launches. 2. Click the Transparent (red-lined) button on the color picker palette to create a transparent appearance for the border. 3. Click the second Border button and select a second border color. 4. Click the Border 3D button and select the color of a three dimensional border. 5. To modify the alpha properties associated with border, from the Alpha field, select an option.
Set Up Font 1. In the font Type field, select the font for this state of the UI Role. 2. In the font Size field, select the size for the font. If the size does not display, enter the number of the desired font in the text area. 3. Click Font Color to display Color Picker and select the color for the font.
Epicor 9 | 9.05.600
20 | Styling and Themes Course 4. Use the Font Style buttons to indicate whether or not any additional styling (for example, bold or italics) will be used with this font. These buttons include • Bold • Italics • Underline • Strikethrough 5. Select vertical Alignment to indicate the alignment this text will have in vertical relationship within the borders of the component. 6. Select horizontal Alignment to indicate the alignment this text will have in horizontal relationship within the borders of the component. Note If the text does not fit within the component’s borders, you can specify how to display this text by using the Text Trimming menu. In this case, select EllipseWord to indicate that ellipses display on the component and that additional words cannot be displayed.
7. Click Disabled and select the backup color. Note This allows you to select the color used when the main font color is disabled.
8. To modify the alpha properties associated with font, from the Alpha field, select an option.
Set Up Image Image options define how a foreground image displays within a component using this state. This image displays in front of any background image, color, gradient, or hatch pattern. 1. Click Image and select File. 2. Search for and select the foreground image you want displayed. 3. Select vertical Alignment to indicate the alignment this image will have in vertical relationship within the borders of the component. 4. Select horizontal Alignment to indicate the alignment this image will have in horizontal relationship within the borders of the component. 5. To modify the alpha properties associated with images, from the Alpha field, select an option.
Set Up Other Parameters The Other panel contains additional settings that do not fit within the categories above. 1. To define the mouse pointer appearance, from the Cursor field, select Hand. 2. To define how visible the selected color level is for this entire UI role, in the Alpha Level field, enter 150. The Background, Border, Font, and Image sections all have an option that can use this Alpha Level value. If the value is set to 0, the current state of the UI role does not display. As the level increases, the state becomes increasingly visible. It is fully visible at Alpha level 255.
Epicor Software
Runtime Styler - Roles | 21 3. In the Themed Element Alpha field, view the available options for alpha properties for the themed elements when the UseOsThemes property is TRUE. This is a Component Role Setting that you can apply to all the UI roles within your theme. This is discussed later in this course. This field is similar to the Alpha fields on the Background, Border, Font, and Image sections.
Use the Resources and Preview Sections Use the Resources and Preview sections to apply resources to the current state and preview how they display. You can also convert a state into a resource to be used in another state. 1. Click Convert to Resource to convert the appearance properties of the current state to a resource. A resource is then created for these properties and used in other UI role states. 2. In the Enter a name for the new resource field, accept the default value. 3. Clear the check box. 4. Click OK. 5. At the top of the Resources section, click Plus and select New StyleSet 1_ UltraButtonDefault_Normal to add the resource. 6. Add the Copy of Default_EpiForm resource. To change the order of precedence, select the resource and click either Up or Down. When a resource is higher in the list than another resource, its settings take precedence over any resource below it. 7. In the Preview section, view how the selected resource displays using the current settings. The 3D Preview section displays the selected resource in three dimensions. 8. Select the Copy of Default_EpiForm resource and click Minus to delete a resource from this role.
Set Up Properties The Properties sheet defines overall values for the current UI role. Depending on the UI Role selected, define a Border Style, a Button Style, both styles, or neither style. 1. Navigate to the Properties sheet. 2. In the Button Style field, select Button3D. Use the Border Style menu to select a style for this UI role’s border. In this example, the list is grayed out, so only the default border style can be used. 3. Exit the Properties panel.
Epicor 9 | 9.05.600
22 | Styling and Themes Course
View UI Role Components The Used By section of the Runtime Styler displays all the components that display using the selected UI role. When an item is selected from this list, it displays Component Role Settings, allowing you to make additional changes to this component. 1. In Runtime Stylist tree view, under UI Roles, click any folder. All the components that use this role display in the Used By section. 2. In the Used By section, double-click the top UltraButton item. Settings for 'UltraButton' displays. For more information about the options on this window, review the Component Role Settings section. 3. Exit Settings for 'UltraButton'. 4. Click Save.
Access UI Role Settings From the Program Navigate to Analysis Code Maintenance. Menu Path: Sales Management > Order Management > Setup > Analysis Code The Runtime Styler opens and a series of call out balloons display as you perform the steps to bring in the analysis codes. Disregard these. 1. In the Analysis Code field, search for and select all analysis codes. 2. Navigate to the List sheet. 3. Hold the mouse over a cell in the grid. Role Selection displays. This window shows all the UI Roles and Component Filters that define the selected component. 4. To launch the settings for grid cell, press 1. The Settings window for GridCell opens. 5. Create a gradient background with two colors that display within the cells of every grid. The change immediately displays within the interface. If the change is not visible, you may need to force a quick refresh of the list view by selecting the Detail sheet and then returning to the List. 6. To further experiment, select other roles and change the color or border properties to understand better how each UI role is affected. For example, select the Grid Row and create a similar gradient for the row. 7. Exit Analysis Code Maintenance and Settings.
Runtime Styler - Component Role Settings Component Role Settings allow you to style both In-Box Components and Infragistics® Components. In-Box Components are interface items not part of the Infragistics® component set. Both component types have settings they share with
Epicor Software
Runtime Styler - Roles | 23 other component role settings (Common Component Properties); they also have settings that are only available within individual components (Component Specific Properties). Whether changing the common or component specific properties, you are only changing the style of the currently selected component role.
Epicor 9 | 9.05.600
24 | Styling and Themes Course
Workshop - Set Up Component Role This workshop demonstrates the set up of a component role.
Open the Component Role Settings 1. Verify you are on the Roles sheet. 2. In the Filter by Control field, select (Show All). 3. Open the Component Role Settings > Inbox Components folder and click Inbox CheckBox. The Settings window opens.
Modify the Common Properties 1. In the Common Component Properties panel, click Categorized to display the different categories available for the selected setting. In the Common Component Properties panel, the Behavior category has only one element. The description of the selected property displays at the bottom of this section. 2. To display these properties in alphabetical order, click Alphabetical. The Property Pages button allows viewing any page information if it is available. 3. To change a specific property, click in the property’s row. All options available for this property typically display as a drop down list or browse button. If a drop down list does not display, you may enter a value within the text field. ResolutionOrder is a property unique to the Common Component Properties section. This property allows you to define the order through which styling and component properties are resolved. For example, if you select ControlThenApplication, the style overrides any property settings defined on the control component with any settings defined within the Epicor application itself.
Modify the Specific Component Properties Component Specific Properties are items only available for the selected component role. 1. In the Object-Specific Properties panel, click Categorized to display the different categories available for the selected setting. In the Object-Specific Properties panel, the Misc category has several elements. The description of the selected property displays at the bottom of this section. 2. To display these properties in alphabetical order, click Alphabetical. The Property Pages button allows viewing any page information if it is available. 3. To change a specific property, click in the property’s row. All options available for this property typically display as a drop down list or browse button. If a drop down list does not display, you may enter a value within the text field.
Epicor Software
Runtime Styler - Roles | 25 4. Exit the Properties panel. 5. If you changed any setting, click Save.
Runtime Styler - Shared Object Role Settings The Shared Object Role Settings node displays the objects that are used between multiple components. For example, the Embeddable Editors display under this node; these editors pull from base UI classes such as EditorWithCombo, EditorWithMask, and EditorWithText. Any changes you make to these shared object roles are passed along to all the components that use these object roles. Note Remember that when you change a Component Role Setting, you only change the component. When you change a Shared Object Role, you affect all the components that use the shared object.
Epicor 9 | 9.05.600
26 | Styling and Themes Course
Workshop - Set Up Shared Object Role This workshop demonstrates the set up of the shared object role. 1. Verify the Roles sheet is selected. 2. Open the Shared Object Role Settings folder. 3. Click the DragDropIndicatorManager setting. The Settings window opens. 4. Click Categorized to display the different categories available for the selected setting. The Miscellaneous category has several elements. The description of the selected property displays at the bottom of this section. 5. To display these properties in alphabetical order, click Alphabetical. The Property Pages button allows viewing any page information if it is available. 6. To change a specific property, click in the property’s row. All options available for this property typically display as a drop down list or browse button. If a drop down list does not display, you may enter a value within the text field. 7. Exit Settings. 8. If you changed any setting, click Save. 9. Exit Runtime Styler.
Epicor Software
Styling - Style Filter Management | 27
Styling - Style Filter Management Style Filter Management allows you to create filters used within a specific theme. It allows you to create child style filters based on the original, or parent, theme. These filters limit the child styles so their styling is only used within a specific company, plant, language, or program. The style filter functionality allows you to create many styling combinations for the same theme, as you can create a child style filter that is the child of another child style filter. You can also create style filter combinations. Filter Inheritance Priorities Child style filters use an inheritance hierarchy. The styling defined on a filter that has a higher priority is passed down to a filter that has lesser priority. You can then override the inherited styling within a filter. The filtering hierarchy is as follows: 1.
Default
2.
Company
3.
Plant
4.
Language
5.
Application
Epicor 9 | 9.05.600
28 | Styling and Themes Course
Workshop - Use Style Filtering This workshop demonstrates how to use style filtering.
Create a Child Style Filter 1. From the Options menu, select Styling > Style Filter Manager. 2. Click Load to browse for the EpicorXXX.isl theme (where XXX are your initials) created earlier and open it. 3. In the tree view, highlight the Root node, right-click Root, and select Create Child Style. A [New] style filter displays. 4. Click the [New] node to view its properties in the right pane. 5. Enter the following information: Field
Data
StyleSetName
XXXSupplier (where XXX are your initials)
FilterType
Application
FilterTypeSelect
VendorEntry
Vendor is also known as Supplier in the program. Epicor.Mfg.UI.VendorEntry is the name that the Epicor application used by the Style Filter to identify the selected item. 6. In the EpiForm_Default field, enter VendorEntry. This means that any Supplier Entry interface component that uses the EpiForm_Default resource automatically changes through this style filter. The EpiStyles section defines the additional interface components that use this style filter, such as the Message Box and the Navigation Control. The Description area displays an explanation for the currently selected property. This text changes depending on the item selected. 7. Select the Create resources if missing check box. This indicates that you will create the VendorEntry EpicResource for this style filter. 8. Click Save. The Save Style Library window opens. 9. Select the EpicorXXX.isl theme created earlier (where XXX are your initials). 10. Click Save. Confirm to replace the existing file. 11. Click Close. Your child style filter is now saved within the parent theme. The filter is essentially a blank slate since no modifications have been made. Next, launch the Runtime Styler to define the styling you want for this child style filter.
Epicor Software
Styling - Style Filter Management | 29
Modify a Child Style Filter 1. From the Options menu, select Styling > Runtime Styler. 2. Click Load. 3. In the Open Style Library window, select the EpicorXXX.isl theme (where XXX are your initials). 4. Click Open. 5. Navigate to the Resources sheet. 6. Confirm that the new VendorEntry resource is displayed. 7. Click VendorEntry resource and modify its background to be gradient. 8. Click Save and exit Runtime Styler.
View the Result for Supplier Maintenance Navigate to Supplier Maintenance. Menu Path: Material Management > Purchase Management > Setup > Supplier 1. Verify all the sheets within this program display using the gradient selected. 2. Exit Supplier Maintenance.
View the Result for Ship Via Maintenance Navigate to Ship Via Maintenance. Menu Path: Material Management > Purchase Management > Setup > Ship Via 1. View the default styling displays within this program. The style filter only applies to Supplier Maintenance. 2. Exit Ship Via Maintenance.
Epicor 9 | 9.05.600
30 | Styling and Themes Course
Styling - Style Tracking The Style Tracking tool helps you create your styling theme. It is a tracking mode you activate that lets you find out the details for a specific interface component. It will help you complete your theme. Style Tracking is useful, for example, when you are trying to apply a style to a specific component. It allows you to find the details about a specific component that you can then modify within the Runtime Styler.
Epicor Software
Styling - Style Tracking | 31
Workshop - Use Style and Theme Tracking This workshop demonstrates how to use style and theme tracking. From the Options menu, select Styling > Style Tracking On/Off to enable Style Tracking. To verify Style Tracking is active, ensure the icon next to this command displays with black outline. Navigate to Supplier Maintenance. Menu Path: Material Management > Purchase Management > Setup > Supplier 1. Move the mouse pointer over the Approved check box. The Style Tracking list displays. • StyleSetName - This is the StyleSet currently used for this component. • Control Name - This is the specific application name for the current component. In this example, chkApproved displays. • Control Type - This is the application name for the interface component. In this case, the EpiCheckBox control type displays. • Top Level Control - This is the main component that contains the selected component. In this example, VendorForm displays. 2. Exit Supplier Maintenance.
Epicor 9 | 9.05.600
32 | Styling and Themes Course
Styling - Theme Maintenance Theme Maintenance completes the styling functionality. This tool allows you to manage the themes you want to make available throughout the Epicor application. Use this tool to add, export, and delete themes. You can also select a theme as the default for all the client installations linked to your application server.
Epicor Software
Styling - Theme Maintenance | 33
Workshop - Use Theme Maintenance This workshop demonstrates how to use Theme Maintenance.
Import and Upload Themes 1. From the Options menu, select the Styling > Theme Maintenance. 2. In the Name field, search for the available themes. Note there is no Epicor theme. 3. Exit the search window. 4. From the Actions menu, select Import Theme. 5. Select EpicorXXX.isl and click Open. 6. In the dialog indicating upload success, click OK. 7. Import the EpicorXXX.isl theme (where XXX are your initials). 8. In the Name field, search for and select Epicor theme. 9. Select the Distributable check box. This indicates that this theme is available for viewing by others using the system. 10. Click Save.
Delete Theme 1. In the Name field, verify the EpicorXXX.isl theme (where XXX are your initials) is displayed. 2. Click Delete. The selected theme is deleted from the tree view and from the list of available themes. 3. Confirm to delete the selected theme.
Set Default Theme Re-import the Epicor theme and set it as a default theme. 1. From the Actions menu, select Import Theme. 2. Select EpicorXXX.isl and click Open. 3. In the dialog indicating upload success, click OK. 4. In the Name field, search for and select the EpicorXXX theme. Epicor 9 | 9.05.600
34 | Styling and Themes Course 5. Verify the Distributable check box is selected. 6. From the Actions menu, select Make Theme Default. 7. In the dialog indicating the theme is the default theme, click OK. 8. Click Save. You can also define a default theme by changing a setting within the Configuration Settings File. This file controls several global sessions for your client installation. To define a default theme in this file, change the Styles setting. 9. Exit the program. To verify the change, close all Epicor windows and log into the Epicor application again. Notice the new theme is visible.
Epicor Software
Case Study | 35
Case Study The following workshop is a case study that provides a detailed example of styling. The workshop takes you through the various steps required to create and deploy a new theme for buttons used throughout the Epicor application. Use this example to better understand how to create themes used throughout your organization. The workshop assumes that you have created a series of graphic files within a graphic design tool. These graphics represent the different states to use for buttons throughout the Epicor application. Use the styling functionality to create a new theme that uses these button graphics. Finally, indicate that this theme becomes the default for your client installation.
Epicor 9 | 9.05.600
36 | Styling and Themes Course
Workshop - Case Study This workshop demonstrates how to combine the entire process.
Create the Style Library 1. From the Options menu, select Styling > Unload Style Theme. 2. From the Options menu, select Styling > Runtime Styler. The Runtime Styler displays. 3. On the Style Library sheet, click New to create the new style.
Define Component Role Settings Change some component role settings for the UltraButton component. These settings are applied to almost all the buttons within the Epicor application. 1. Verify you are on the Roles sheet. 2. Expand the Component Role Settings > Infragistics Components node. 3. Click UltraButton. The Settings window for the UltraButton displays. 4. In the Common Properties pane, in the UseFlatMode field, select True. 5. In the UseOsThemes field, select False. This indicates that you override the styling from a base role. 6. Exit Settings.
Define UI Role Settings Now change the settings for the UltraButton UI Role. 1. On the Roles sheet, expand the UI Roles > Base node. 2. Click Button. The Settings window for the Button displays. 3. Navigate to the Common States > Normal sheet. This indicates that you are modifying the Normal state for the Button UI role. 4. Click the background Fill color button. The Color Picker displays. 5. Select Transparent (the icon with the white square and red line). The Transparent icon displays within the background Fill color button.
Epicor Software
Case Study | 37 6. In the Border section, select the border Fill color button. The Color Picker displays. 7. Select Transparent. The border Fill color button displays the Transparent icon.
Select and Size the Image To create button graphics that work well with this example, make graphics that are 22 width x 18 height pixels in size. Three graphic files are required: • Normal.png • HotTracked.png • Pressed.png Place these graphic files within a folder accessible to the Runtime Styler. Select the specific button graphic file used for the Normal state of this UI role. 1. In the Background Image section, click Image and select File. The Open window displays. 2. Navigate to where you previously saved the three button state graphics you created. 3. Select the Normal.png file and click Open. 4. Click Layout Mode and select Stretched. A Margins button displays. 5. Click Margins. The Stretch Margins Editor window displays. 6. For margins, enter the following information: Field
Data
Left Margin
5
Top Margin
4
Right Margin
5
Bottom Margin
4
7. Click OK.
Save the Styling Globally Because you only selected the UseFlatMode option on the UltraButton component setting, some buttons do not use your new normal state. To make sure all the buttons throughout the Epicor application use this same state, modify a Component Role Setting. 1. On the Roles sheet, expand the Component Role Settings node. 2. Click All Components.
Epicor 9 | 9.05.600
38 | Styling and Themes Course The Settings window for All Components displays. 3. In the UseFlatMode field, select True. 4. In the UseOsThemes field, select False. This indicates that you override the styling from a base role. Now all buttons throughout the Epicor application use your new Normal state.
Modify Hot-Tracked State Repeat these steps for the button component’s HotTracked state. During these steps, you indicate that your HotTracked graphic is used for this button state. 1. On the Roles sheet, expand the UI Roles > Base node. 2. Click Button. The Settings window for the Button opens. 3. Navigate to the Common States > HotTracked sheet. 4. Set both the background Fill color and the border Fill color buttons to Transparent. 5. Select HotTracked.png file as the background image. 6. Select Stretched layout mode. 7. For margins, enter the following information: Field
Data
Left Margin
5
Top Margin
4
Right Margin
5
Bottom Margin
4
8. Click OK.
Modify Pressed State Repeat these steps for the button component’s Pressed state. 1. On the Roles sheet, expand the UI Roles > Base node. 2. Click Button. The Settings window for the Button displays. 3. Navigate to the Common States > Pressed sheet. 4. Set both the background Fill color and the border Fill color buttons to Transparent. 5. Select Pressed.png file as the background image.
Epicor Software
Case Study | 39 6. Select Stretched layout mode. 7. For margins, enter the following information: Field
Data
Left Margin
5
Top Margin
4
Right Margin
5
Bottom Margin
4
8. Click OK. 9. Exit Settings.
Save the Style Library 1. On the Style Library sheet, click Save As. 2. Browse for the Epicor Styles folder. 3. In the File name field, enter XXXGrayButtons (where XXX are your initials). 4. Click Save. 5. Exit Runtime Styler. The new theme is now ready to become the default look for your client installation, which you determine by using the Theme Maintenance Wizard.
Set the Style Library As Default 1. From the Options menu, select Styling > Theme Maintenance. 2. From the Actions menu, select Import Theme. 3. Import the GrayButtons theme. 4. In the Name field, search for and select GrayButtons theme. 5. Select the Distributable check box. 6. Make the selected theme default. 7. Click Save. 8. Minimize Theme Maintenance.
Epicor 9 | 9.05.600
40 | Styling and Themes Course
View the Theme The button theme is now the default look for all buttons on the interface. To view your new theme in action, close the Epicor application and then launch it again. When the Main menu displays, notice how this new theme is incorporated into the interface. Notice that the bottom and left side sliders now contain thumb buttons that use your new button style. The arrow buttons use the button style. The navigation buttons at the bottom of the Main menu display within this style. 1. Launch any program to confirm that all buttons in the Epicor application use the XXXGrayButton styling. The button graphics display for all the various sized buttons because you selected the Stretched Layout Mode. 2. Hold your mouse over a button, the HotTracked.png graphic displays, similarly when you select a button, the Pressed.png graphic displays. This occurs because you defined these different states within Runtime Stylist.
Remove Theme 1. Maximize Theme Maintenance. 2. In the tree view, select XXXGrayButton. 3. On the standard toolbar, click Delete. Verify your style library has been removed from the Epicor application.
Epicor Software
Conclusion | 41
Conclusion Congratulations! You have completed the Styling and Themes course. Please take a moment to let Epicor know how to serve you better by completing a course evaluation at http://www.keysurvey.com/survey/191084/2e21/ or by clicking the Course Evaluation link below. Your feedback provides the guidelines for the future direction of Epicor education.
Epicor 9 | 9.05.600
