OpusPro with javascript

ovo · **Posted:** February 5th, 2014, 9:18 pm

I'd like to share a few things I've found out when discovering HTML5 export possibilities from Opus Pro 9.03. It might be obvious for other users but it took me a few hours to find it. Opus help says you can extend the application for javascript but not how.

1) Calling an alert("alert") from OpusScript.
2) Adding a link to an external javascript file.
3) Get Opus variable from javascript.

1) To call an alert("alert") message in browser from OpusScript you need to use syntax:

Code:

window.alert("message written in OpusScript")

.

2) How to link a javascript file to exported project? I haven't found a way how to automatically link an external javascript file. Adding a reference to a javascript file (after loading a master page) works. You need to copy myFunctions.js file manually to the project.

Code:

var sElement = document.createElement("script"); 
sElement.type = "text/javascript"; sElement.async = true;
sElement.src = "myFunctions.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(sElement, s);

Now you can access your function in myFunctions.js:

Code:

function jsTest()
{
alert("action from myFunctions.js.");
}

To call jsTest() use "window.jsTest();" from the script e.g. on the button in Opus.

3) Do you need to access a variable which is created in OpusPro? Use syntax

Code:

alert(DWVariables.instance().getValue("variableName"));

from your external javascript file.

Comments are welcomed.
Ota

mackavi · **Posted:** February 6th, 2014, 1:58 pm

console.log is a better choice than alert. Opus will also use the standard Debug.trace if you enable it at publish - this has another advantage that it can be easily turned off.

Mack
https://twitter.com/imsmackavi

Lar_123 · **Posted:** February 8th, 2014, 3:18 am

Ota,
Thanks for sharing your work and your discoveries on what works.
And thanks Mack for rounding-out the discussion with some options and best practice methods.

Larry

Glen Burn · **Posted:** February 13th, 2014, 2:37 pm

Keep it coming Ota, Mack & Lar

Although I only comprehend the gist of your posts, it's great to have sight of new possibilities to experiment with - even if it does make me realise how far away I am from achieving 'Godlike' on my forum profile....

bwpatric · **Joined:** November 3rd, 2004, 2:11 pm **Posts:** 323

What I did was I put something like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Under the Advanced tab on the Publish Settings - HTML 5 dialog place in HTML <head> Additions field.

On a page I can use Bootstrap "stuff" by using an HTML object and then putting in something like:
<div class="panel-group" id="accordion" style="font-size:12pt">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>

When published I get a nice Bootstrap accordion. Not sure exactly how to size it, but it's kind of cool. That means I'd have Bootstrap stuff to be able to use and JQuery stuff to be able to use as well.

ovo · **Posted:** May 29th, 2015, 1:30 pm

Advanced - Export - <Head> is available since Opus version 9.5. Now it is easier to extend the page functionality with own .js files.

Digital Workshop

OpusPro with javascript

Who is online