OutSystems wrapper for smoothState.js: https://github.com/mdlar/smoothState.js

Benefits of going StateLess

1. Prefetch and serve pages with Ajax asynchronously
2. Apply custom CSS transitions / animations when navigating the app
3. Simulate a single-page application without rewriting your app

Getting Started

• Download widget from the forge
• Add "Zeni_State" as a dependency to your module (project)
• Find the "Initialize" Widget under UI Flows/Zeni_State/StateLess
• Drag/drop "Initialize" onto your primary Layout (recommended) or individual page
• When drag/dropped successfully you will see <init_stateless> on the screen
• Initialize is expecting 1 parameter: OptionsJSON
• See below for a sample OptionsJSON, visit original JS docs for help: https://github.com/mdlar/smoothState.js

Sample OptionsJSON

Copy/Paste this starter snippet into the OptionsJSON parameter in OS Studio:

"{
    prefetch: true,
    pageCacheSize: 5,
    onStart: {
        duration: 400,
        render: function($container) {
           $container.find('.main-content').addClass('fade-in-top');
           smoothState.restartCSSAnimations();
        }
    },
    onReady: {
        duration: 0,
        render: function($container, $newContent) {
            $container.find('.main-content').removeClass('fade-in-top');
            $container.html($newContent);
        }
    }
}"

Notes

This component currently only comes with one animation CSS class for testing purposes: 

'fade-in-top'

You'll notice that this class is used in the above OptionsJSON snippet. We recommend that you create your own unique CSS Animations through a tool like this: http://animista.net/