#180 - Add admin field hint, help, and tooltip support

admin/broadleaf-open-admin-platform/src/main/java/org/broadleafcommerce/openadmin/web/form/entity/Field.java

@@ -17,6 +17,7 @@
 package org.broadleafcommerce.openadmin.web.form.entity;
 
 import org.apache.commons.lang3.ArrayUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.broadleafcommerce.common.presentation.client.SupportedFieldType;
 
 
@@ -49,6 +50,9 @@ public class Field {
     protected Boolean isFilterSortDisabled;
     protected Boolean isDerived;
     protected Boolean isLargeEntry;
+    protected String hint;
+    protected String tooltip;
+    protected String help;
 
     /* ************ */
     /* WITH METHODS */
@@ -143,11 +147,26 @@ public Field withDerived(Boolean isDerived) {
         setDerived(isDerived);
         return this;
     }
-    
+
     public Field withLargeEntry(Boolean isLargeEntry) {
         setLargeEntry(isLargeEntry);
         return this;
     }
+
+    public Field withHint(String hint) {
+        setHint(hint);
+        return this;
+    }
+
+    public Field withHelp(String help) {
+        setHelp(help);
+        return this;
+    }
+
+    public Field withTooltip(String tooltip) {
+        setTooltip(tooltip);
+        return this;
+    }
 
     /* ************************ */
     /* CUSTOM GETTERS / SETTERS */
@@ -348,5 +367,28 @@ public Boolean getIsLargeEntry() {
     public void setLargeEntry(Boolean isLargeEntry) {
         this.isLargeEntry = isLargeEntry;
     }
-
+
+    public String getHint() {
+        return StringUtils.isBlank(hint) ? null : hint;
+    }
+
+    public void setHint(String hint) {
+        this.hint = hint;
+    }
+
+    public String getTooltip() {
+        return StringUtils.isBlank(tooltip) ? null : tooltip;
+    }
+
+    public void setTooltip(String tooltip) {
+        this.tooltip = tooltip;
+    }
+
+    public String getHelp() {
+        return StringUtils.isBlank(help) ? null : help;
+    }
+
+    public void setHelp(String help) {
+        this.help = help;
+    }
 }

admin/broadleaf-open-admin-platform/src/main/java/org/broadleafcommerce/openadmin/web/service/FormBuilderServiceImpl.java

@@ -483,7 +483,10 @@ protected void setEntityFormFields(EntityForm ef, List<Property> properties) {
                          .withReadOnly(fmd.getReadOnly())
                          .withTranslatable(fmd.getTranslatable())
                          .withAlternateOrdering((Boolean) fmd.getAdditionalMetadata().get(Field.ALTERNATE_ORDERING))
-                         .withLargeEntry(fmd.isLargeEntry());
+                         .withLargeEntry(fmd.isLargeEntry())
+                         .withHint(fmd.getHint())
+                         .withTooltip(fmd.getTooltip())
+                         .withHelp(fmd.getHelpText());
 
                     if (StringUtils.isBlank(f.getFriendlyName())) {
                         f.setFriendlyName(f.getName());

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/css/admin/blc-admin.css

@@ -89,6 +89,12 @@ span.error {
 	color: inherit;
 }
 
+.field-tooltip {
+	color: #8EAA2B;
+	cursor: pointer;
+	padding: 0 3px;
+}
+
 input[type="search"] {
     -webkit-appearance: none;
     padding: 0px;
@@ -105,6 +111,7 @@ input[type="text"], input[type="password"], input[type="date"], input[type="date
 
 .foreign-key-value-container,
 .entity-form .custom.dropdown,
+span.field-help,
 .indented-form-value,
 .entity-form input[type="text"], .entity-form input[type="password"], .entity-form input[type="date"], .entity-form input[type="datetime"], .entity-form input[type="email"], .entity-form input[type="number"], .entity-form input[type="search"], .entity-form input[type="tel"], .entity-form input[type="time"], .entity-form input[type="url"], .entity-form textarea {
     margin: 7px 0 0px 0px;
@@ -136,11 +143,16 @@ fieldset div.field-box:last-child {
 	margin-bottom: 0;
 }
 
+span.field-help,
 .indented-form-value {
 	display: block;
 	font-size: 12px;
 }
 
+span.field-help {
+	color: #555;
+}
+
 fieldset {
 	background-color: #FAFAFA;
 	margin: 0 0 25px 0;

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/components/entityForm.html

@@ -59,6 +59,9 @@
                     <div th:unless="${field.readOnly}" th:remove="tag">
                         <div th:substituteby="${'fields/' + #strings.toLowerCase(field.fieldType)}" />
                     </div>
+
+                    <span th:if="${field.help}" class="field-help" th:text="#{${field.help}}" />
+
                 </div>
             </fieldset>
 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/components/fieldTooltip.html

@@ -0,0 +1,3 @@
+<i th:if="${field.tooltip}"
+    class="has-tip tip-right field-tooltip icon-question" 
+    th:attr="title=#{${field.tooltip}}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/components/ruleBuilder.html

@@ -1,6 +1,7 @@
 <blc_admin:admin_field_builder fieldBuilder="${field.fieldBuilder}">
 
-    <div class="field-label" th:if="${!field.required}" th:text="#{${field.friendlyName + '_Question'}}" />
+    <div class="field-label inline" th:if="${!field.required}" th:text="#{${field.friendlyName + '_Question'}}" />
+    <div th:substituteby="components/fieldTooltip" />
 
     <div th:classappend="${field.styleClass}">
 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/additional_foreign_key.html

@@ -1,5 +1,6 @@
 <div th:if="${field instanceof T(org.broadleafcommerce.openadmin.web.form.entity.ComboField)}">
     <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+    <div th:substituteby="components/fieldTooltip" />
 
     <select class="six" th:field="*{fields['__${field.name}__'].value}" th:if="${! #maps.isEmpty(field.options)}">
         <option value="" th:text="#{Default_Select}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/asset_lookup.html

@@ -1,5 +1,7 @@
 <div class="asset-selector-container">  
     <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+    <div th:substituteby="components/fieldTooltip" />
+
     <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
     <a class="show-asset-freeform-url" href="#" th:text="'(' + #{Freeform_URL} + ')'" />
     <br/>

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/asset_url.html

@@ -1,4 +1,6 @@
 <div class="field-label" th:text="#{asset_url_image_label}" />
+<div th:substituteby="components/fieldTooltip" />
+
 <img class="thumbnail" 
     th:if="*{fields['__${field.name}__'].value != null}"
     blc:src="@{${cmsUrlPrefix} + *{fields['__${field.name}__'].value} + '?largeAdminThumbnail'}"

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/boolean.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 
 <div class="custom-checkbox">

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/broadleaf_enumeration.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 
 <select class="six" th:field="*{fields['__${field.name}__'].value}" 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/color.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <br />
 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/combo_field.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 
 <select class="six" th:field="*{fields['__${field.name}__'].value}">

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/data_driven_enumeration.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 
 <select class="six" th:field="*{fields['__${field.name}__'].value}" 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/date.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 
 <div class="datepicker-container">

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/decimal.html

@@ -1,3 +1,4 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <input type="text" class="two" th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/explicit_enumeration.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <select class="six" th:field="*{fields['__${field.name}__'].value}">
     <option th:each="entry : *{fields['__${field.name}__'].options}"

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/html.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <div th:substituteby="components/fieldTranslation" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/html_basic.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <div th:substituteby="components/fieldTranslation" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/id.html

@@ -1,3 +1,4 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <input type="text" class="four" th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/integer.html

@@ -1,3 +1,4 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <input type="text" class="two" th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/media.html

@@ -1,5 +1,8 @@
 <div class="asset-selector-container">  
-    <div class="field-label" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+    <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+    <div th:substituteby="components/fieldTooltip" />
+    <br />
+
     <input type="hidden" class="mediaItem" th:field="*{fields['__${field.name}__'].value}" />
 
     <a th:if="*{fields['__${field.name}__'].media != null and !#strings.isEmpty(fields['__${field.name}__'].media.url)}"

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/money.html

@@ -1,3 +1,4 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <input type="text" step=".01" class="two" th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/password.html

@@ -1,3 +1,4 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <input type="password" class="twelve" th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/readonly.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <div class="twelve" style="margin-left: 20px; margin-bottom: 10px;" th:switch="*{fields['__${field.name}__'].fieldType}">
 
     <span th:case="'MEDIA'" th:remove="tag">

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/string.html

@@ -1,7 +1,14 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <div th:substituteby="components/fieldTranslation" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
+
 <div th:if="*{fields['__${field.name}__'].isLargeEntry}" class="twelve indented-form-value">
-    <textarea class="autosize" style="width: 100%;" th:field="*{fields['__${field.name}__'].value}"/>
+    <textarea class="autosize" style="width: 100%;" 
+        th:field="*{fields['__${field.name}__'].value}"
+        th:placeholder="${field.hint}" />
 </div>
-<input th:unless="*{fields['__${field.name}__'].isLargeEntry}" type="text" class="twelve" th:required="${field.required}" th:field="*{fields['__${field.name}__'].value}" />
+<input th:unless="*{fields['__${field.name}__'].isLargeEntry}" type="text" class="twelve" 
+    th:required="${field.required}" 
+    th:placeholder="${field.hint}"
+    th:field="*{fields['__${field.name}__'].value}" />

admin/broadleaf-open-admin-platform/src/main/resources/open_admin_style/templates/fields/text.html

@@ -1,4 +1,5 @@
 <div class="field-label inline" th:text="#{${field.friendlyName}}" th:classappend="${field.required ? 'required' : ''}" />
+<div th:substituteby="components/fieldTooltip" />
 <span class="error" th:errors="*{fields['__${field.name}__'].value}" />
 <div th:if="*{fields['__${field.name}__'].isLargeEntry}" class="twelve indented-form-value">
     <textarea class="autosize" style="width: 100%;" th:field="*{fields['__${field.name}__'].value}"/>