Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Populate or copy information from a source into table rows

Avatar

Level 6

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @islandgirl23 

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

 

thanks

dipti

Avatar

Correct answer by
Community Advisor

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