Populate or copy information from a source into table rows | Community
Skip to main content
I
islandgirl23
Level 5
August 14, 2021
Solved

Populate or copy information from a source into table rows

  • August 14, 2021
  • 2 replies
  • 831 views

Hello,

 

Is there a way to copy information from a (database) source and paste it into the columns of a table.  I have a table that needs information in it that a user can copy and paste from another source into the rows.  The database is by line items.  Example:  item 1 - Bi-fold door.  Item 2 - Single door.  Item 1 will be copied and pasted into the first row of the table.  Item 2 will be copied and pasted into row 2 of the table, etc.  The issue is that they have to copy and paste each line item from the source to the rows.  This is time consuming if you have a lot of line items.  Is there a way to copy all line items from the database so that they populate in their prospective row of the table?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Umesh_Thakur

What I understand is, You want to generate an editable table from the data, fetched from the database.

If this is the case, you can easily do that withe help of front-end script and back-end servlet.

Whenever you need make an ajax call to servlet, which will return data in json or other format from the database then on success generate the table on the page. something like below code:

Jquery:

 
 
<script>
	$('#submit').click(function() {

		var localePath = $('#localeList').val();
		var tableBody = '<table width="100%" cellpadding="3" align="center" style="font-size:12px;border-collapse:collapse;" border="1"><tr style="font-weight:bold;background:#16A1E7;"><td style="color:white;">All</td><td style="color:white;">Name</td><td style="color:white;">Modified By</td><td style="color:white;">Rolleout By</td></tr>';

		$.ajax({
			type : 'GET',
			url : '/bin/sling/pageList',
			data : {
				localePath : localePath,
			},
			success : function(response) {
				response.forEach(function(d)
					        {
					            tableBody += '<tr><td>'+d.lastRolledoutOn+'</td><td>'+d.pageTitle+'<br>'+d.pagePath+'</td><td>'+d.lastModifiedBy+'</td><td>'+d.lastReplicatedOn+'</td></tr>';   
					        });
					            tableBody += '<table>';
					    
					        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
					          
					           var divContainer = document.getElementById("showData");
					              divContainer.innerHTML = tableBody;
				console.log("responded data ",JSON.stringify(response));
			}
		});
	});
</script>
 
 
And servlet will be :
 
@Component(name = "Un-Published page list generator", immediate = true, service = Servlet.class, property = {
		"sling.servlet.paths=/bin/sling/pageList", "sling.servlet.methods=GET" })
public class PageListGeneratorServlet extends SlingSafeMethodsServlet{

	private static final long serialVersionUID = 1L;
	
	@Reference
	private QueryBuilder builder;

	private static final Logger LOG = LoggerFactory.getLogger(PageListGeneratorServlet.class);

	@Override
	protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
		try {
			
			JSONArray jsonArray = new JSONArray();
			
			String currentPagePath = request.getParameter("localePath").trim();
			Map<String, String> predicateMap = new HashMap<String, String>();
			
			predicateMap.put("path", currentPagePath);
			predicateMap.put("type", "cq:Page");
			predicateMap.put("p.limit", "-1"); 
			
			Query query = builder.createQuery(PredicateGroup.create(predicateMap), session);
		    SearchResult result = query.getResult();
		    
		    for(Hit hit : result.getHits()) {
		    
			    			JSONObject jsonObject = new JSONObject();
			    			//pupulate yor json object
			    			jsonArray.put(jsonObject);
			}
			
			response.setContentType("application/json");
			
			response.getWriter().write(jsonArray.toString());
		} catch (Exception e) {
			LOG.error("Exception", e);
		}
	}

}
Here we are getting data from query builder API in your case you will be getting data from database.
 
Hope this will help.
Umesh Thakur

2 replies

Dipti_Chauhan
Community Advisor
Dipti_ChauhanCommunity Advisor
Community Advisor
August 15, 2021

Hi @islandgirl23 

  Do you want to display data dynamically? Or you are looking solution for copy paste multiple rows in one go?

 

thanks

dipti

    Umesh_Thakur
    Community Advisor
    Umesh_ThakurCommunity AdvisorAccepted solution
    Community Advisor
    August 16, 2021

    What I understand is, You want to generate an editable table from the data, fetched from the database.

    If this is the case, you can easily do that withe help of front-end script and back-end servlet.

    Whenever you need make an ajax call to servlet, which will return data in json or other format from the database then on success generate the table on the page. something like below code:

    Jquery:

     
     
    <script>
	$('#submit').click(function() {

		var localePath = $('#localeList').val();
		var tableBody = '<table width="100%" cellpadding="3" align="center" style="font-size:12px;border-collapse:collapse;" border="1"><tr style="font-weight:bold;background:#16A1E7;"><td style="color:white;">All</td><td style="color:white;">Name</td><td style="color:white;">Modified By</td><td style="color:white;">Rolleout By</td></tr>';

		$.ajax({
			type : 'GET',
			url : '/bin/sling/pageList',
			data : {
				localePath : localePath,
			},
			success : function(response) {
				response.forEach(function(d)
					        {
					            tableBody += '<tr><td>'+d.lastRolledoutOn+'</td><td>'+d.pageTitle+'<br>'+d.pagePath+'</td><td>'+d.lastModifiedBy+'</td><td>'+d.lastReplicatedOn+'</td></tr>';   
					        });
					            tableBody += '<table>';
					    
					        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
					          
					           var divContainer = document.getElementById("showData");
					              divContainer.innerHTML = tableBody;
				console.log("responded data ",JSON.stringify(response));
			}
		});
	});
</script>
     
     
    And servlet will be :
     
    @Component(name = "Un-Published page list generator", immediate = true, service = Servlet.class, property = {
		"sling.servlet.paths=/bin/sling/pageList", "sling.servlet.methods=GET" })
public class PageListGeneratorServlet extends SlingSafeMethodsServlet{

	private static final long serialVersionUID = 1L;
	
	@Reference
	private QueryBuilder builder;

	private static final Logger LOG = LoggerFactory.getLogger(PageListGeneratorServlet.class);

	@Override
	protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
		try {
			
			JSONArray jsonArray = new JSONArray();
			
			String currentPagePath = request.getParameter("localePath").trim();
			Map<String, String> predicateMap = new HashMap<String, String>();
			
			predicateMap.put("path", currentPagePath);
			predicateMap.put("type", "cq:Page");
			predicateMap.put("p.limit", "-1"); 
			
			Query query = builder.createQuery(PredicateGroup.create(predicateMap), session);
		    SearchResult result = query.getResult();
		    
		    for(Hit hit : result.getHits()) {
		    
			    			JSONObject jsonObject = new JSONObject();
			    			//pupulate yor json object
			    			jsonArray.put(jsonObject);
			}
			
			response.setContentType("application/json");
			
			response.getWriter().write(jsonArray.toString());
		} catch (Exception e) {
			LOG.error("Exception", e);
		}
	}

}
    Here we are getting data from query builder API in your case you will be getting data from database.
     
    Hope this will help.
    Umesh Thakur
      Terms & ConditionsAccessibility statement

      Loading footer...