Complex Widgets

Problem:
Dear Support,
I’m new to AP and currently trying to implement some fancy stuff that was created with Captivate.
In one of the slides I have a question in form of a “mini shop-system” (pick products from a catalogue, calculate the amounts needed and the resulting price). Realizing this in HTML & JQ would be possible but it is not clear to me how to embed this into AP. Do you have any recommendations or an example how realize such a select-widget?

The overall structure of such a table would be (8-9 lines):
<select 1 of 60 products from a catalogue> <enter amount * prieces>

Best wishes
Ludger

ActivePresenter version: 8.3

OS: Windows 10

Notes:

Hi Ludger,
You can make the Drop-down list by using Group Objects (How to Group Objects in ActivePresenter 8 - Atomi Systems, Inc.)
To make a group of shapes:

  • Insert shapes: Insert tab > Shapes

  • Group them: Right-click the shapes > Group

  • Hide them initially: Right-click the group > Initially Hidden

Here is an example project: sample1.approj (328 KB)

Regards,
Quynh

Dear Quynh,
thank you very much. Would it be possible to realize the catalogue as a scrollable grid box for my 60 items?
Is it possible in AP to create content in a grid box via JS?
Best wishes
Ludger

Hi Ludger,

You can use Flex box to create a scrollable box for 60 items. See the image below for detail.
Screenshot (328)

You can take a look at this link Flex Box - New Feature in ActivePresenter 8 - Atomi Systems, Inc. to know more about Flex box.

Regards,
Quynh

Dear Quynh,

Also I wonder if I could add or change object states via JS since I would end up with 2 x 8 x 60 states at the end, if I see it right.
Thanks and best wishes

Hi Ludger,

Sorry for the late reply.
We’ve just gone back to work after a company trip.

Regarding your concern, you can use JS API object.state(stateName); to change object state.
You can refer to the Custom JavaScript in HTML5 Output in ActivePresenter 8 User Manual (p.254) for details.

Regards,
Quynh

Dear Quynh,
thank you. In the meantime I worked out a solution that avoids using object states but uses variables and JS-Programming instead. Although I’m not finished yet, the solution looks promising to me and I avoid creating a lot of redundancy.
However I found that using variables has the drawback, that they are project specific. Copying the slide from my development project to the final project requires that I recreate all variables manually, or is there a way to copy them as well?
Best wishes
Ludger

Hi Ludger,

Unfortunately, there is no way to copy created variables from one project to another one. You need to recreate them manually.

Regards,
Quynh

Thank you, Quynh. Maybe slide-specific variables could be something to introduce in one of the upcoming versions.
Best wishes
Ludger

Dear Quynh,
is there a way to set the contents of a text caption element via JS? I want to avoid creating 60 variables to fill my caption elements.
Best wishes
Ludger

You can use the following APIs (they’re mentioned in the Custom JavaScript in HTML5 Output section of the user manual):

var textCaption = prez.object('text caption name');
// set html formatted text
textCaption.html('normal text, <b>bold text</b>');
// set plain text
textCaption.text('plain text');

Regards

Thank you, Toan. This works fine so far.
In my case I now have a scrollable flexbox with around 50 captions (one caption per catalog entry). In each of the captions I write a headerless table with one row. This works but the columns cannot be alligned, which looks bad. Is there a better strategy to realize a “scrollable table” in AP? Is it somehow possible to create grid elements via js?
Best wishes
Ludger

Do you have a screenshot or a project to better understand the issue?

If it’s possible, it would be very complicated. You must create the table, handle events and trigger suitable actions by your own scripts.

Regards

Did you mean the HTML <table> element? If so you can use CSS to set widths for its columns.
Otherwise, I can’t help without the project. You can keep only one slide with your flexbox and send it to support@atomisystems.com

Regards