Merge branch 'feature/update-readme' into develop

Author: EliJDonahue

LICENSE.md

@@ -1,7 +1,7 @@
 
 The MIT License (MIT)
 
-Copyright (c) 2017 Aras Corporation
+Copyright (c) 2018 Aras Corporation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,26 +2,27 @@
 
 This project demonstrates how to customize form field appearance with custom CSS.
 
-## Project Details
-
-See [TESTSTATUS file](./TESTSTATUS.md) for latest testing information.
-
-#### Built Using:
-Aras 11.0 SP7
+## How It Works
 
-#### Versions Tested:
-Aras 11.0 SP9 (open release), Aras 11.0 SP7, Aras 11.0 SP5 (open release)
+This project contains two parts - a code tree overlay and an import package. The code tree overlay adds a custom CSS file and several SVG files to the `Innovator\Client\customer` folder. (It is always recommended to store any custom or third party files in the customer folder.)
 
-#### Browsers Tested:
-Internet Explorer 11, Firefox 38 ESR, Chrome
+The import package updates the Part form properties to use the custom CSS file added by the code tree overlay. It also adds a Form Event method to override some of the default CSS classes.
 
-> Though built and tested using Aras 11.0 SP7, this project should function in older releases of Aras 11.0.
+## History
 
-## How It Works
+Release | Notes
+--------|--------
+[v1.2](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.2) | Custom JavaScript function definitions migrated from Field script tags to the labs_StyleForm Form Event.
+[v1.1](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.1) | Code refactored to separate content and presentation.
+[v1.0](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.0) | Initial release.
 
-This project contains two parts - a code tree overlay and an import package. The code tree overlay adds a custom CSS file and several SVG files to the `Innovator\Client\customer` folder. (It is always recommended to store any custom or third party files in the customer folder)
+#### Supported Aras Versions
 
-The import package updates the Part form properties to use the custom CSS file added by the code tree overlay. It also adds a Form Event method to override some of the default CSS classes.
+Project | Aras
+--------|------
+[v1.2](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.2) | 11.0 SP9, 11.0 SP7, 11.0 SP5
+[v1.1](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.1) | 11.0 SP7, 11.0 SP5
+[v1.0](https://github.com/ArasLabs/custom-form-css/releases/tag/v1.0) | 11.0 SP7, 11.0 SP5
 
 ## Installation
 
@@ -49,6 +50,9 @@ The import package updates the Part form properties to use the custom CSS file a
   * Optional: Enter a description in the Description field.
 8. Enter the path to your local `..\CustomFormCSS\Import\imports.mf` file in the Manifest File field.
 9. Select **CustomFormCSS** in the Available for Import field.
+10. Optional: Select the **com.aras.innovator.solution.PLM** package from the Available for Import field. 
+    * This adds the labs_StyleForm method to the Part form and updates a few fields. Check out the import package to see which fields are updated. 
+    * If you don't import the PLM package, you'll need to manually update the form you want to style.
 10. Select Type = **Merge** and Mode = **Thorough Mode**.
 11. Click **Import** in the top left corner.
 12. Close the Aras Package Import tool.
@@ -57,11 +61,47 @@ You are now ready to login to Aras and check out the customized Part form.
 
 ## Usage
 
+### Viewing the Styled Form
+
+![Customized Part Form](./Screenshots/custom_part_form.PNG)
+
 1. Log in to Aras as admin.
 2. Click **Design > Parts** in the table of contents (TOC).
 3. Open an existing Part, or create a new Part to view the customized Part form design. It should look something like this:
 
-![Customized Part Form](./Screenshots/custom_part_form.PNG)
+### Styling Other Forms
+
+Once you have styles defined for one form, you can apply them to other forms as well. These steps demonstrate how to apply the custom styles in this project to the default Document form in Aras.
+
+![Document Form](./Screenshots/document_form.png)
+*The default Document form, without custom styles.*
+
+1. Log in to Aras as admin.
+2. Click **Administration > Forms** in the TOC.
+3. Search for the Document form, then open and lock it.
+4. Add the labs_StyleForm method as an **onLoad** form event.
+5. In the **Form Body** tab, enter the following CSS in the CSS field:
+
+    ```(css)
+    @import url("../styles/default.css"); 
+    @import url("../customer/myStyles.css");
+    ```
+
+Once you apply these steps, your Document form will look something like this:
+
+![Half Styled Form](./Screenshots/half_styled_form.png)
+*The Document form, with custom styles applied. It still needs some manual adjustments.*
+
+Though you've applied your custom styles to the Document form, it still needs a little tweaking before it's ready for end users. Creating whitespace between fields and grouping similar fields will make the form more user-friendly. 
+
+If you want to create a "field group" as shown in this project, you can create an HTML field with a div and the "user_group" or "info_group" CSS classes. You can also add these classes to existing fields, like the item_info field. 
+
+>Note that these field groups only group fields *visually* - the fields "inside" these boxes won't drag like if they belonged to a groupbox field.
+
+Here's an example of what your final Document form could look like:
+
+![Styled Document Form](./Screenshots/styled_document_form.png)
+*The Document form, with custom styles and manual spacing adjustments.*
 
 ## Contributing