Adobe Experience Manager Sites & More

tejuuu123 · 4/7/24

Can anyone help me ?

Raja_Reddy · 4/7/24

Hi @tejuuu123
you can create a Show and Hide button with a dialog box using the Coral UI components.

package com.example.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

@Component(service = Servlet.class, property = {
        "sling.servlet.methods=GET",
        "sling.servlet.paths=/bin/showhide"
})
public class ShowHideServlet extends SlingAllMethodsServlet {

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        out.println("<html>");
        out.println("<head>");
        out.println("<title>Show and Hide Example</title>");
        out.println("<style>");
        out.println(".dialog-box {");
        out.println("  position: fixed;");
        out.println("  top: 50%;");
        out.println("  left: 50%;");
        out.println("  transform: translate(-50%, -50%);");
        out.println("  background-color: `#fff`;");
        out.println("  padding: 20px;");
        out.println("  border: 1px solid `#ccc`;");
        out.println("  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);");
        out.println("}");
        out.println("</style>");
        out.println("</head>");
        out.println("<body>");
        out.println("<button id=\"show-btn\">Show</button>");
        out.println("<div id=\"dialog-box\" style=\"display: none;\" class=\"dialog-box\">");
        out.println("<p>This is the dialog box content.</p>");
        out.println("<button id=\"close-btn\">Close</button>");
        out.println("</div>");
        out.println("<script src=\"/etc/clientlibs/myproject/clientlib/js/jquery.min.js\"></script>");
        out.println("<script>");
        out.println("$(document).ready(function() {");
        out.println("  $('#show-btn').click(function() {");
        out.println("    $('#dialog-box').show();");
        out.println("  });");
        out.println("  $('#close-btn').click(function() {");
        out.println("    $('#dialog-box').hide();");
        out.println("  });");
        out.println("});");
        out.println("</script>");
        out.println("</body>");
        out.println("</html>");
    }
}

In this example, we create a servlet called ShowHideServlet that handles the GET request to /bin/showhide. Inside the doGet method, we generate the HTML markup for the Show and Hide button and the dialog box.

The dialog box is initially hidden using the display: none; CSS property. When the Show button is clicked, we use jQuery to show the dialog box by calling $('#dialog-box').show();. Similarly, when the Close button is clicked, we use jQuery to hide the dialog box by calling $('#dialog-box').hide();.

Make sure to include the jQuery library in your project by adding the following client library category to your clientlib.config.js file:

myproject.clientlib.js.categories=jquery

client library in your component's HTL file:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='myproject.clientlib.js'}"></sly>

arunpatidar · 4/8/24

Hi @tejuuu123
Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Arun Patidar

Shashi_Mulugu · 4/8/24

@tejuuu123 , Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

BrianKasingli · 4/8/24

Strictly having a solution for the customer's we can use HTML, CSS, and Javascript to solve this problem.

Jsfiddle: https://jsfiddle.net/76Lxw5sq/

HTML

<button class="toggle">
  toggle
</button>
<div id="nav" class="hidden">
  element
</div>

CSS

.hidden {
  display: none;
}
div {
  margin-top: 10px;
}

JS

document.addEventListener("DOMContentLoaded", function e() {
  var n = function(e) {
    document.getElementById("nav").classList.toggle("hidden")
  };
  document.removeEventListener("DOMContentLoaded", e);
  var t = Array.prototype.slice.call(document.querySelectorAll(".toggle"), 0);
  t.length && t.forEach(function(e) {
    e.addEventListener("click", n)
  })
})

EstebanBustamante · 4/9/24

@tejuuu123 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community