Solved
How to create Show and Hide button, when we click on Show it will open dialog box and when we click on close it should be close
Can anyone help me ?
Raja_ReddyAccepted solution
Community Advisor
April 7, 2024
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>