Implemented: Add new type of layered window drawer

framework/webtools/webapp/webtools/WEB-INF/controller.xml

@@ -326,10 +326,8 @@ under the License.
         <security https="true" auth="true"/>
         <response name="success" type="view" value="FindJob"/>
     </request-map>
-    <request-map uri="JobDetails">
-        <security https="true" auth="true"/>
-        <response name="success" type="view" value="JobDetails"/>
-    </request-map>
+    <request-map uri="JobDetails"><security/><response name="success" type="view" value="JobDetails"/></request-map>
+    <request-map uri="JobDetailsOverview"><security/><response name="success" type="view" value="JobDetailsOverview"/></request-map>
     <request-map uri="FindJobTracker"><security/><response name="success" type="view" value="FindJobTracker"/></request-map>
     <request-map uri="JobTrackerDetails"><security/><response name="success" type="view" value="JobTrackerDetails"/></request-map>
     <request-map uri="FindJobTrackerResult"><security/><response name="success" type="view" value="FindJobTrackerResult"/></request-map>
@@ -707,6 +705,7 @@ under the License.
     <view-map name="ServiceList" type="screen" page="component://webtools/widget/ServiceScreens.xml#ServiceList"/>
     <view-map name="FindJob" type="screen" page="component://webtools/widget/ServiceScreens.xml#FindJob"/>
     <view-map name="JobDetails" type="screen" page="component://webtools/widget/ServiceScreens.xml#JobDetails"/>
+    <view-map name="JobDetailsOverview" type="screen" page="component://webtools/widget/ServiceScreens.xml#JobDetailsOverview"/>
     <view-map name="FindJobTracker" type="screen" page="component://webtools/widget/ServiceScreens.xml#FindJobTrackers"/>
     <view-map name="JobTrackerDetails" type="screen" page="component://webtools/widget/ServiceScreens.xml#JobTrackerDetails"/>
     <view-map name="JobTrackerState" type="screen" page="component://webtools/widget/ServiceScreens.xml#JobTrackerState"/>

framework/webtools/widget/ServiceForms.xml

@@ -94,6 +94,11 @@ under the License.
                 <parameter param-name="jobId" from-field="jobId"/>
             </hyperlink>
         </field>
+        <field name="overview" title="${uiLabelMap.CommonShow}">
+            <hyperlink description="${uiLabelMap.CommonShow}" target="JobDetailsOverview" link-type="layered-drawer" also-hidden="false">
+                <parameter param-name="jobId" from-field="jobId"/>
+            </hyperlink>
+        </field>
         <field name="poolId" title="${uiLabelMap.WebtoolsPool}" sort-field="true"><display/></field>
         <field name="runTime" title="${uiLabelMap.WebtoolsRunTime}" sort-field="true"><display/></field>
         <field name="startDateTime" title="${uiLabelMap.CommonStartDateTime}" sort-field="true"><display/></field>

framework/webtools/widget/ServiceScreens.xml

@@ -95,6 +95,25 @@ under the License.
             </widgets>
         </section>
     </screen>
+    <screen name="JobDetailsOverview">
+        <section>
+            <actions>
+                <script location="component://webtools/src/main/groovy/org/apache/ofbiz/webtools/service/JobDetails.groovy"/>
+            </actions>
+            <widgets>
+                <decorator-screen name="EmbeddedDecorator" location="component://common/widget/CommonScreens.xml">
+                    <decorator-section name="single">
+                        <screenlet title="${uiLabelMap.PageTitleJobDetails}">
+                            <include-form name="JobDetails" location="component://webtools/widget/ServiceForms.xml"/>
+                        </screenlet>
+                        <screenlet title="${uiLabelMap.WebtoolsRunTimeDataInfo}">
+                            <include-grid name="JobRuntimeDataInfo" location="component://webtools/widget/ServiceForms.xml"/>
+                        </screenlet>
+                    </decorator-section>
+                </decorator-screen>
+            </widgets>
+        </section>
+    </screen>
 
     <screen name="ThreadList">
         <section>

framework/widget/dtd/widget-common.xsd

@@ -595,6 +595,7 @@ under the License.
                             </xs:documentation>
                         </xs:annotation>
                     </xs:enumeration>
+                    <xs:enumeration value="layered-drawer"/>
                 </xs:restriction>
             </xs:simpleType>
         </xs:attribute>

framework/widget/src/main/java/org/apache/ofbiz/widget/WidgetWorker.java

@@ -18,6 +18,7 @@
  *******************************************************************************/
 package org.apache.ofbiz.widget;
 
+import java.util.List;
 import java.util.Map;
 
 import jakarta.servlet.ServletContext;
@@ -355,4 +356,8 @@ public static Map<String, Object> resolveParametersMapFromQueryString(Map<String
                 ? UtilHttp.getQueryStringOnlyParameterMap(qbeString.replace("&amp;", "&"))
                 : null;
     }
+
+    public static boolean isModalLink(String linkType) {
+        return linkType != null && List.of("layered-modal", "layered-drawer").contains(linkType);
+    }
 }

framework/widget/src/main/java/org/apache/ofbiz/widget/model/ModelTheme.java

@@ -377,6 +377,9 @@ private static void addWidgetProperties(Map<String, Object> initWidgetProperties
                 initWidgetPropertiesMap.put("linkDefaultLayeredModalHeight", Integer.valueOf(childElement.getAttribute("height")));
                 initWidgetPropertiesMap.put("linkDefaultLayeredModalWidth", Integer.valueOf(childElement.getAttribute("width")));
                 break;
+            case "layered-drawer":
+                initWidgetPropertiesMap.put("linkDefaultLayeredModalWidth", Integer.valueOf(childElement.getAttribute("width")));
+                break;
             }
         }
     }

framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroCommonRenderer.java

@@ -149,7 +149,7 @@ public static String getLinkUrl(CommonWidgetModels.Link link, String linkType, M
             String target = link.getTarget(context);
             if (UtilValidate.isNotEmpty(target)) {
                 final URI linkUri = WidgetWorker.buildHyperlinkUri(target, link.getUrlMode(),
-                        "layered-modal".equals(link.getLinkType()) ? null : link.getParameterMap(context), link.getPrefix(context),
+                        WidgetWorker.isModalLink(linkType) ? null : link.getParameterMap(context), link.getPrefix(context),
                         link.getFullPath(), link.getSecure(), link.getEncode(),
                         request, response);
                 linkUrl = linkUri.toString();

framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroFormRenderer.java

@@ -645,7 +645,7 @@ public void renderFieldTitle(Appendable writer, Map<String, Object> context, Mod
                         targetType = "plain";
                     }
                     StringWriter sr = new StringWriter();
-                    makeHyperlinkString(sr, modelFormField.getHeaderLinkStyle(), targetType, targetBuffer.toString(), null, titleText, "",
+                    makeHyperlinkString(sr, modelFormField.getHeaderLinkStyle(), "", targetType, targetBuffer.toString(), null, titleText, "",
                             modelFormField, this.request, this.response, context, "");
                     String title = sr.toString().replace("\"", "\'");
                     sr = new StringWriter();
@@ -2274,7 +2274,7 @@ public void makeHyperlinkByType(Appendable writer, String linkType, String linkS
                 }
             }
         } else {
-            if ("layered-modal".equals(realLinkType)) {
+            if (WidgetWorker.isModalLink(realLinkType)) {
                 String uniqueItemName = UtilRandom.getUnique("Modal_", true);
                 String width = (String) this.request.getAttribute("width");
                 if (UtilValidate.isEmpty(width)) {
@@ -2287,21 +2287,22 @@ public void makeHyperlinkByType(Appendable writer, String linkType, String linkS
                     this.request.setAttribute("height", height);
                 }
                 this.request.setAttribute("uniqueItemName", uniqueItemName);
-                makeHyperlinkString(writer, linkStyle, targetType, target, parameterMap, encodedDescription, confirmation, modelFormField, request,
-                        response, context, targetWindow);
+                makeHyperlinkString(writer, linkStyle, realLinkType, targetType, target, parameterMap, encodedDescription, confirmation,
+                        modelFormField, request, response, context, targetWindow);
                 this.request.removeAttribute("uniqueItemName");
                 this.request.removeAttribute("height");
                 this.request.removeAttribute("width");
             } else {
-                makeHyperlinkString(writer, linkStyle, targetType, target, parameterMap, encodedDescription, confirmation, modelFormField, request,
-                        response, context, targetWindow);
+                makeHyperlinkString(writer, linkStyle, realLinkType, targetType, target, parameterMap, encodedDescription, confirmation,
+                        modelFormField, request, response, context, targetWindow);
             }
         }
     }
 
-    public void makeHyperlinkString(Appendable writer, String linkStyle, String targetType, String target, Map<String, String> parameterMap,
-                                    String description, String confirmation, ModelFormField modelFormField, HttpServletRequest request,
-                                    HttpServletResponse response, Map<String, Object> context, String targetWindow) throws IOException {
+    public void makeHyperlinkString(Appendable writer, String linkStyle, String linkType, String targetType, String target,
+                                    Map<String, String> parameterMap, String description, String confirmation, ModelFormField modelFormField,
+                                    HttpServletRequest request, HttpServletResponse response, Map<String, Object> context, String targetWindow)
+            throws IOException {
         if (description != null || UtilValidate.isNotEmpty(request.getAttribute("image"))) {
             StringBuilder linkUrl = new StringBuilder();
             final URI linkUri = WidgetWorker.buildHyperlinkUri(target, targetType,
@@ -2408,6 +2409,8 @@ public void makeHyperlinkString(Appendable writer, String linkStyle, String targ
             sr.append(id);
             sr.append("\" text=\"");
             sr.append(text);
+            sr.append("\" linkType=\"");
+            sr.append(linkType);
             sr.append("\" />");
             executeMacro(writer, sr.toString());
         }

framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroMenuRenderer.java

@@ -240,7 +240,7 @@ public void renderLink(Appendable writer, Map<String, Object> context, MenuLink
         }
         parameters.put("confirmation", confirmationMessage);
 
-        boolean isModal = "layered-modal".equals(linkType);
+        boolean isModal = WidgetWorker.isModalLink(linkType);
         if ("hidden-form".equals(linkType) || isModal) {
             final URI actionUri = WidgetWorker.buildHyperlinkUri(target, link.getUrlMode(), null,
                     link.getPrefix(context), link.getFullPath(), link.getSecure(), link.getEncode(),

framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/MacroScreenRenderer.java

@@ -284,7 +284,7 @@ public void renderLink(Appendable writer, Map<String, Object> context, ModelScre
         if (UtilValidate.isEmpty(height)) {
             height = String.valueOf(modelTheme.getLinkDefaultLayeredModalHeight());
         }
-        boolean isModal = "layered-modal".equals(linkType);
+        boolean isModal = WidgetWorker.isModalLink(linkType);
         if ("hidden-form".equals(linkType) || isModal) {
             final URI actionUri = WidgetWorker.buildHyperlinkUri(target, link.getUrlMode(), null,
                     link.getPrefix(context), link.getFullPath(), link.getSecure(), link.getEncode(),

framework/widget/src/main/java/org/apache/ofbiz/widget/renderer/macro/RenderableFtlFormElementsBuilder.java

@@ -853,7 +853,7 @@ public RenderableFtl makeHyperlinkByType(String linkType, String linkStyle, Stri
             return renderableFtlStringBuilder.build();
 
         } else {
-            if ("layered-modal".equals(realLinkType)) {
+            if (WidgetWorker.isModalLink(realLinkType)) {
                 String uniqueItemName = UtilRandom.getUnique("Modal_", true);
                 String width = (String) request.getAttribute("width");
                 if (UtilValidate.isEmpty(width)) {
@@ -872,10 +872,9 @@ public RenderableFtl makeHyperlinkByType(String linkType, String linkStyle, Stri
                 request.removeAttribute("height");
                 request.removeAttribute("width");
                 return renderableFtl;
-            } else {
-                return hyperlinkMacroCall(linkStyle, targetType, target, parameterMap, description, confirmation,
-                        modelFormField, request, response, context, targetWindow);
             }
+            return hyperlinkMacroCall(linkStyle, targetType, target, parameterMap, description, confirmation,
+                    modelFormField, request, response, context, targetWindow);
         }
     }
 

themes/common-theme/template/macro/HtmlFormMacroLibrary.ftl

@@ -999,9 +999,10 @@ Parameter: delegatorName, String, optional - name of the delegator in context.
     <#if confirmation?has_content> onclick="return confirm('${confirmation?js_string}')"</#if>>
       <#if imgSrc?has_content><img src="${imgSrc}" alt=""/></#if>${description}</a>
 </#macro>
-<#macro makeHyperlinkString hiddenFormName imgSrc imgTitle title alternate linkUrl description text="" linkStyle="" event="" action="" targetParameters="" targetWindow="" confirmation="" uniqueItemName="" height="" width="" id="">
+<#macro makeHyperlinkString hiddenFormName imgSrc imgTitle title alternate linkUrl description text="" linkStyle="" event="" action="" targetParameters="" targetWindow="" confirmation="" uniqueItemName="" height="" width="" id="" linkType="">
     <#if uniqueItemName?has_content>
         <a href="javascript:void(0);" id="${uniqueItemName}_link"
+           data-open-in="<#if linkType=='layered-drawer'>drawer<#else>${linkType}</#if>"
            data-dialog-params="${targetParameters?html}"
            data-dialog-width="${width}"
            data-dialog-height="${height}"

themes/common-theme/template/macro/HtmlMenuMacroLibrary.ftl

@@ -54,7 +54,7 @@ under the License.
     </#list>
 </form><#rt/>
   </#if>
-  <#if uniqueItemName?has_content && "layered-modal" == linkType>
+  <#if uniqueItemName?has_content && ["layered-modal", "layered-drawer"]?seq_contains(linkType)>
     <#local params = "{&quot;presentation&quot;:&quot;layer&quot; ">
     <#if parameterList?has_content>
       <#list parameterList as parameter>
@@ -63,6 +63,7 @@ under the License.
     </#if>
     <#local params += "}">
     <a href="javascript:void(0);" id="${uniqueItemName}_link"
+       data-open-in="<#if linkType=='layered-drawer'>drawer<#else>${linkType}</#if>"
        data-dialog-params="${params}"
        data-dialog-width="${width}"
        data-dialog-height="${height}"

themes/common-theme/webapp/common-theme/js/plugins/drawer/drawer.css

@@ -0,0 +1,169 @@
+#app-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 480px;
+    max-width: 100vw;
+    height: 100%;
+    background: #fff;
+    box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform .3s ease;
+}
+
+#app-drawer.is-open {
+    transform: translateX(0);
+}
+
+.drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid #e0e0e0;
+    flex-shrink: 0;
+}
+
+.drawer-title {
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.drawer-close {
+    background-color: unset !important;
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.drawer-close::before,
+.drawer-close::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 14px;
+    height: 1.5px;
+    background: rgba(var(--purple-default), 1);
+    border-radius: 1px;
+}
+
+.drawer-close::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.drawer-close::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.drawer-close:hover {
+    color: #000;
+    opacity: .7;
+}
+
+.drawer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+/* ── Skeleton ───────────────────────────────────────────────────── */
+.sk {
+    background: #e8e8e8;
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.sk::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(255, 255, 255, .7) 50%,
+            transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: sk-wave 1.6s ease-in-out infinite;
+}
+
+@keyframes sk-wave {
+    to {
+        transform: translateX(100%);
+    }
+}
+
+.sk-badges {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.sk-badge {
+    height: 22px;
+    border-radius: 20px;
+}
+
+.sk-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+}
+
+.sk-title-line {
+    height: 18px;
+    width: 45%;
+}
+
+.sk-link {
+    height: 12px;
+    width: 22%;
+}
+
+.sk-card {
+    border: 1px solid #eee;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.sk-card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.sk-card-title {
+    height: 13px;
+}
+
+.sk-card-sub {
+    height: 10px;
+    width: 20%;
+}
+
+.sk-chevron {
+    width: 8px;
+    height: 8px;
+    flex-shrink: 0;
+    margin-right: 4px;
+    border-right: 1.5px solid #ccc;
+    border-bottom: 1.5px solid #ccc;
+    transform: rotate(-45deg);
+}