Forum Discussion

Gursimrat's avatar
Gursimrat
Leader
12 years ago

Using the dropdown options for custom component

We have a custom components for the boards pages to display all the threads in a new UI. Now that we have achieved almost everything which was required, I need to get the answers of few questions.  ...
NicoB's avatar
NicoB
Lithium Alumni (Retired)
11 years ago

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

bryanpollack's avatar
bryanpollack
Ace
11 years ago

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.

  • dementad's avatar
    dementad
    Genius
    11 years ago

    Can you share? :smileyvery-happy:

  • bryanpollack's avatar
    bryanpollack
    Ace
    11 years ago

    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!