Hi, Stefan. Welcome to our community!

OutSystems StyleGuide (available in the Academy) uses Prototype, along with Scriptaculous, which provides us most of the slick tricks for enabling Rich Web Applications.

Nevertheless, OutSystems platform is not restricted to any 1 Javascript framework. Just use what you prefer.

To use a specific JS framework, just paste its source code into the eSpace Javascript area, accessible through the eSpace properties (just double-click the main tree node in Service Studio).

This source code will be put into an external file, and each eSpace page will be linked to this external resource, through the required markup.

Find more about Adding Javascript in our Online Service Studio Help (also accessible through the search functionality of our community):

https://www.outsystems.com/help/servicestudio/4.0/web_user_interface/adding_java_script.htm 
(June 2012 update: this link is no longer available. Please refer to the latest version of the help file)

Hi Stefan,

Welcome to our community.

Since your first question is not a simple one, I'll have to address a complex answer. I'm sorry for that. Here it goes...

Gonçalo suggestion is usually the best way to add external javascript...

Unfortunately, it will not be appropriate for Dojo toolkit.

This has to do with the fact that this toolkit isn't just a bunch of JS files. They're stored within directories and subdirectories... which means that we need to maintain their tree structure when deploying our solution.

1st possible solution:
- Change each .js file to work within one single directory, instead of being organized within subdirs.
This not good at all. We're talking about several files and there could exist files with the same name but within different directories. Besides we would certainly introduce several errors and loose time debugging them.

2nd possible solution:
- Install the toolkit manually within the HTTP server and change our applications to point them.
This is still not quite good, although much better. OutSystems platform gives us the ability to 1-Click-Publish an entire application without having to worry about database scripts, files deployed, file versioning... and now I have to manually deploy files? Of course this a very normal task, but people already familiar with the OS platform know what I mean. Nevertheless this is the most simple solution.

3rd possible solution:
- We can build an extension Dojo.xif (using Integration Studio) and add the Dojo toolkit zipped file as a resource.
- Then we could build an application DojoDeployer.oml (using Service Studio), which will be executed with special credentials (it has to be a user with write privileges within the web server; don't use ASPNET), that will unzip the resource file from that extension and save its directories within the web server. This functionality would be available as a web service.
- Finally our main application XPTO.oml could call that web service from DojoDeployer within the application's setup procedure (bootstrap), and after that our application could be executed with nor problems since all dojo directories would have been copied to our application directory.

Hope it helps.

Feel free to discuss any point that could raise some doubt...

Duarte Gouveia

Hello,

The other day I had a similar problem, and chose the one suggested by OutSystems Engineering: including all Javascript framework files and directories in my eSpace through omlresources. This also enforced a more contained approach than having another reference (such as an extension) to deal with it. Also, resources that are included into an extension get their directory structure «flat», meaning they are simply ignored...

Nevertheless, I came across a problem which the omlresources does not cope with: it's not possible to add multiple files with just one command like using wildcards, for instance. You can't do something like omlresources -o MyeSpace.oml -a *.* or even add a recursive parameter to include a set of directories. So what do you do? Especially if you're not a scripting guru? :)

Just go to your command prompt, under your javascript framework root directory, and type:

• dir /b /s > files.bat This will print a complete list of files and directories into a text file;
• Open files.bat with your notepad;
• Replace all absolute paths with a relative one, such as:
  • The string C:\Documents and settings\user\Desktop\scriptaculous\
  • with the string omlresources -o MyeSpace.oml -a .\scriptaculous\
• Save your file and execute it from your command prompt.

Guess what this will do ;)

Have fun,
Pedro Gonçalves

Hey,

i was trying to do this for CKEditor, but there is no omlresources.exe file in Service Studio 5.1 directory....

How can i do this?

Best Regards.

Diogo C S Cordeiro

Hi Diogo,

You can either import each file one by one (which should take a long time) or you can download service studio 4.2, create an eSpace only to import the files and follow the procedures above, and then you can merge that eSpace with the one you are working on.

Cheers,
Tiago Simões

Hmmm, and do you know if this is already in Engineering backlog?

Best Regards,

Diogo C S Cordeiro

In 5.1.1.2, you can use this command line to add a resource:
    ServiceStudio.exe -importResource espace.oml resource_filename [target path]

You can do a similar batch file to import the whole directory

Best Regards,
Gustavo Guerra

Hi Gustavo,

I tried to do something like this from the directory where the OML is and where the resources reside:

Hi Joop,

I alos faced that problem recently, but as it turns out, I did not have 5.1.1.2, but  a previous 5.1 version. Could that be the case?

An alternative - sadly, the one that I used - was to grab my Service Studio 4.2 installation, create a blank eSpace, and using a batch file and omlresources, I added 100+ resources to the eSpace.

The commands using omlresources were

OmlResources.exe -o TestResources.oml -a js\swfobject.js
OmlResources.exe -o TestResources.oml -a js\jquery\jquery.dropdown.js
OmlResources.exe -o TestResources.oml -a js\jquery\jquery.js
OmlResources.exe -o TestResources.oml -a js\mootools\mootools.dropdown.js
OmlResources.exe -o TestResources.oml -a js\scriptaculous\scriptaculous.dropdown.js

Then I upgraded it in 5.1, and all went well.

In your case, you may also have the alternative of adding the resources to an extension, and referencing them.

I hope this helps.

Regards,

Paulo Tavares

Hi Paulo,

After all it worked out fine with 5.1 ...

Just go to your command prompt, under your javascript framework root directory, and type:

• dir /b /s > files.bat This will print a complete list of files and directories into a text file;
• Open files.bat with your notepad;
• Change the names so it looks like this

"C:\Program Files\OutSystems\Service Studio 5.1\ServiceStudio.exe" -importResource espace.oml resource_filename [target_path]

It took some time to go over all the filenames and add the target path after the DIR command and the replace action mentioned earlier
 

Do you have a bat file example and where the place to put the oml file?

I tried and it executes but I cannot see the resource in service studio. any way to debug this?

Carlos,

Now you can simply do this with a right click on the Resources folder.

Understand, but I have to upload hundreds of documents, Is there a way to use a batch process to do it. I followed instrucctions and ran the bat file but after sucessful completion nothing was reflected in service studio. I tried reloading oml and nothing. also executed in same folder were I had a backup of the oml and tried to open it to see if any was reflected and nothing. Any idea?