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>
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
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
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.
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
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');
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
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