Using the dropdown options for custom component

Hi,

just be aware that replacing the out of th box message list would mean that you will lose some feature which cannot be replicated using REST Api:

1. Batch processing

2. Moderation tool.

If you want to customize the message list component you might want to get in touch with our Professional Services team.

Our platform is able to override/suppress the columns in the message list but this customization can be achieved only by backend configuration. By overriding I mean that the content of each column can be replaced by a custom component which would give you enough flexibility without giving up the batch processing and moderation tools.

Thanks,

Nico

I've actually found a way to AJAX in the default Lithium options menu so I can use my custom components but still use the proper built in options menu. Thanks for the help.

Can you share? :smileyvery-happy:

It's a bit klugey, but it seems to work ok. I set up my Forum Topic page to have both my custom thread component and the default thread component (message-list), and have the default one hidden from view and set to display only one post. 

I've set up my options buttons as follows:

$('#posts').on('click', '.options a', function(e) {
	var id = $(this).closest('.options').attr('id').replace('actions-', '');
			
	getOptions(id, this);
});

Here's my getOptions function:

	function getOptions(messageId, me) {
		if ($(me).siblings('[id^=actionMenuDropDown]').length > 0) {
			$(me).siblings('[id^=actionMenuDropDown]').toggle();
		} else {
			$.get("/t5/-/-/m-p/" + messageId + "?isAjax", function (res) {
				var html = $.parseHTML(res);
			
				var options = $(html).find('.message-uid-' + messageId + ' [id^=actionMenuDropDown]');
				
				$(me).closest('.options').append(options);
			});
		}
	}

I have the ?isAjax, because I hide certain things on the page when that is passed in (e.g. header, footer, custom thread component) in order to speed up the page load. 

And to hide the options after clicking elsewhere:

$(document).mouseup(function (e){
					var container = $('.options [id^=actionMenuDropDown]');

					if (!container.is(e.target) // if the target of the click isn't the container...
						&& container.has(e.target).length === 0) // ... nor a descendant of the container
					{
						container.hide();
					}
				});

Hope that helps!

---

samudhraa wrote:

As far as I know , there isn't a way to use the standard dropdown option in your custom thread list. (Because the dropdown actions are tied to the each message id of the thread) . Here are a few work arounds that I can think of ,

1. Include the standard message list , hide it and clone and place the options for each message. Then you would have to manipulate the links of the option a tag , with your message id and check if the desired action takes place. As we are doing the whole thing as custom , it might be better if you could choose the options that are required and hide the rest.

2. What we usually do , is use the standard thread page - because of its in built functionality and context setting .But we have done extensive customization to change the look and feel and add/remove other stats , custom components for each message using jQuery. 

3. Choose the features that you would need from dropdown , and create your own custom components to perform the actions , using REST api. 

I am not sure , which one of these would suit your requirement . But I hope one of it helps.

Thanks,

Sam

 

---

samudhraa - As per your second point, the threads page is a lot easier to customize in comparison to the boards page, because it provides the ability to change each message quilt via ForumMessage layout, but in case of ForumPage, we cannot make the changes to the each grid, so it is really hard to replicate the design to custom needs.

Also, I wouldn't recommend using the approach where we have to hide the default message list component and then place our custom component above it to leverage the menu options, reasons are;

As we would want to have it configurable via admin, i.e. the number of topics displayed on this page, which are on average 25 per thread, but we have many cases where the clients want to have minimum amount of pageviews, so they decide to show more topics per page, i.e. 50, so in this case, we will have 100 topics on the page, 50 in our custom component and 50 hidden in the message list which would slow down the pages. So until we don't have an option to alter the grids inside studio for ForumPage, I don't see any formal way of customizing the boards page and to leverage the menu options.