Percussion widget in custom widget

Long shot…

Is it possible to somehow add Percussion’s widget (Example: Title widget) in custom widget? This will be super useful and time saving.

Is the reason for this is that you want to leverage the business logic that Percussion has already built, but then extend it to perform additional actions? Can you give an example of a type of widget you would want to build this way? 

Not OP, but the reason I’d like to do this is to have the Percussion page auto list widget appear inside a panel of an accordian.

For anyone else looking to do this, I was able to use jQuery to detach and append the widget to the location I wanted.

@jeff - do you have an example of how it works?

Sure. In my case, I wanted to place a page auto list inside of a panel of an accordian.

$(’#accordion-container > div > div:nth-child(2)’).detach().appendTo(’#collapseOne > div’);

I placed the widget in the same container as my accordian. You have to step over what I like to call the bloat-div, ‘.perc-vertical’, and grab the entire div.perc-widget. Detach() removes the div and all of its html and then appendTo() writes it to the specified panel. I could write the selectors much more specifically, but they work for my needs. I should also note that I actually use 2 page auto lists and run:

$(’#accordion-container > div > div:nth-child(2)’).detach().appendTo(’#collapseOne > div’);
$(’#accordion-container > div > div:nth-child(2)’).detach().appendTo(’#collapseTwo > div’);

This method seems to also work in the design/editing view in CM1, but you’ll need to turn off javascript to be able to make changed to the percussion widget settings.

TL;DR - place widget near where you want it and use jQuery to detach and append it to the correct location.

*EDIT*- Let me know if you need an actual html example and I can put something together.

Actual HTML would be nice. Thanks!

There are lots that I’d like to implement… here’s an example… and I also included the dropdown option as well.

Quick example with html:

Here we’ve placed 2 widgets inside the container, side-by-side. The first widget is your custom html, be it in an html widget or custom widget. The second widget is Percussion’s widget that you want to have appear inside your HTML. Our jQuery in this case:

$(’#myContainer > div > div:nth-child(2)’).detach().appendTo(’#placeYouWantPercWidget’);

Breakdown:
$(’#myContainer > div > div:nth-child(2)’) - selects the second widget; you can be more specific with the selector if you can give the widget a class.
.detach() - this grabs the selected DOM element and all of it’s content, removes it from the DOM, but keeps all of its associated data.
.appendTo() - places that removed element to where you specify in the function’s parameters.

@dan - here is a good example of what I was talking about. In this screenshot, I have custom widget with two RTE widgets. On the right sidebar, I wanted to use page autolist widget but there was no way to do so. I had to manually add PDF for each list. Thank you.

Dan, see my new post far below. Thanks.