FlexView API

Basic Usage

The FlexView API is a JavaScript API that renders content of the Outdooractive Platform into an HTML node creating all markup automatically and loading all objects automatically through asynchronous loading. The look and feel of all visible elements of the FlexView API may be influenced with CSS.

The FlexView API consists of two parts:

The Overview: explore all content of your project on a map or as list or gallery
The Detail View: read all details of a content object like a tour, a hut etc.

The default integration starts with the overview and opens the detail view of an object depending on user interaction. A standalone integration is available for both views.

The FlexView API overview offers four views:

map: a map with catory based icons and clustering
gallery: thumbnail boxes showing an image and basic information of an object
list: a sortable list with infinite scrolling

An instance of the Outdooractive FlexView API renders objects of one of the following content types:

tour
lodging
hut
poi
skiresort
story
offer
current condition

The attribute frontendtype of the configration object is used to choose the content type.

Content types can’t be mixed. The FlexView API overview will always show objects of one content type.

The FlexView API overview comes with two optional main selectors:

“What?”: a drop down menu that let’s the user filter the content by activity/category
“Where?”: an auto-complete field that let’s the user find a place

There is an optional “Refine your search” box that is collapsed by default. The attributes and values used to refine a search depend on the content type.

You can choose between the following actions (configuration parameter actionOpenType) that are performed as soon as the user selects an object inside the FlexView API overview:

in-page: integrates the FlexView Widget in a single page and opens the detail view of any content object as a pure JavaScript action on the same page (see example).
page-load: define a custom detail page url. The detailpage is rendered with help of the FlexView API Detailpage (see example).
none: no action or implement custom action with help of JavaScript callback (see example).

    // behaviour when a detail view is opened
conf.actionOpenType = "in-page";

The FlexView API Detail View may be integrated stand-alone (see detail page example).

Integration

You just have to add one <script /> tag linking the Outdooractive Javascript Library to the page header. Add a <div /> container with css class oax-top-cont to the page body and instantiate the FlexView API. Implement some CSS rules to change the look and feel if needed.

The steps to integrate the FlexView API:

Script Tag: load the Outdoorative JavaScript Library
HTML Container: specify the container that is filled with the FlexView API
JavaScript Initialization: pass a configuration object to the FlexView API constructor
CSS Design: influence the FlexView API’s look and feel

The basic HTML 5 template below illustrates the described steps:

<!DOCTYPE html>
<html>
  <head>
    <title>outdooractive platform - API Template</title>
    <meta charset="utf-8">

    
    <!-- load Outdooractive Javascript API -->
    <script type="text/javascript" 
            src="https://api-oa.com/jscr/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>


  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- container used by FlexView API -->
    <div class="oax-top-cont"></div>


    <!-- and some lines of javascript inside a script tag -->
    <script type="text/javascript">

      var conf = {
          frontendtype:   "tour",          // choose content type
          zoom:           11,              // set initial zoom level
          center:       [ 10.292, 47.546 ] // set initial map center
      };
      
      var fvp = oa.api.flexviewpage( conf );

    </script>
  </body>
</html>

Mobile websites

The FlexView API includes a representation for mobile devices that is optimized for smaller screen sizes, touch gestures and that saves bandwidth.

Read about the background here: Optimizing for mobile devices

The Outdooractive JavaScript library is linked inside the html header:

<!-- load Outdooractive Javascript API -->
<script type="text/javascript" 
        src="https://api-oa.com/jscr/oa_head.js?proj=api-dev-oa&amp;key=yourtest-outdoora-ctiveapi&amp;lang=en"></script>

Replace the filename in the path with one of three options:

oax_head.js: FlexView API desktop-only representation
oam_head.js: FlexView API mobile-only representation
oa_head.js: the Outdooractive JavaScript API automatically decides between desktop and mobile representation based on user agent settings

All FlexView API examples use oa_head.js. Use your browser’s developer tools to set the http headers to a mobile device to see the mobile version on a desktop device.

Note

Please use the namespace oa if you implement for desktop and mobile. The namespaces oax and oam may only be used in the equivalent use cases. The APIs oax.api and oam.api may offer some special and exclusive methods in the future.

Language

The Outdooractive API uses the browser locale by default to choose the language of the FlexView GUI and the content. Just use the HTTP GET parameter lang to overwrite it:

oax_head.js?lang=en

values : de, en, fr, it

Deeplinks and Detailpages

The FlexView API default integration offers the overview over all project content and the detail views on one single HTML page:

FlexView overview - open detail views on the same page

As soon as a user selects e.g. a tour the detail view is opened with help of JavaScript on the same page. The FlexView API adds an fragment identifier (hash). The resulting URL is a deeplink to the detail view:

FlexView detail view - on the same page as overview (identified by fragment identifier)

/Examples/FlexView-API/Basic-Usage/FlexView.Standard.html#ipd=1389008

The FlexView API allows to integrate the overview and the detail view on separate html pages. The overview may open arbitraty URLs that are returned from a JavaScript callback function:

conf.openOOIUrl = function(data) {

                    return "FlexView.DetailPage.html?id=" + data.id;

                  };

This example shows the overview:

FlexView overview - open detail view on a separate page

that opens the following detail page example on click:

FlexView API detail view - on a separate page (identified by path or query string)

/Examples/FlexView-API/Detail-Pages/FlexView.DetailPage.html?id=3892043

The function may be used to return nice urls but it’s often easier to return simple id based urls that redirect to a nice url page.

Server Side Include

The Outdooractive FlexView API is a JavaScript widget loading content and resources directly from the Outdooractive platform.

The html content of a FlexView API detailpage may be loaded on server side with one simple http request.

Note: The SSI response is an empty string if the source of an content object (e.g. a tour) is not activated for indexing (in your API project).

See it in action:

FlexView API server side include example

All you have to do is to load a html snippet over http on server side and put it into the <div /> container with css class “oax-top-cont”. The Url to the snippet is (replace the value of get parameter i with the id of the tour that should be rendered):

https://www.outdooractive.com/alpportal/ssi/desktop/detail?i=152449&proj=api-dev-oa&lang=de

The FlexView API server side include example may be called with parameter i to load a different tour:

FlexView.DetailPage.SSI.php?i=6549313

This example uses PHP to load the snippet. Don’t forget the wrapping div container:

<div class="oax-top-cont">
 <?php
  // default id if no id is set through http get parameter
  $i = '1524449';

  // check if http get parameter i is an id
  if (preg_match('/^-?[0-9]+$/',$_GET["i"])) {
   $i = $_GET["i"];
  }

  // Url to load SSI snippet including project key and object id
  $url = "https://www.outdooractive.com/alpportal/ssi/desktop/detail?i=${i}proj=api-dev-oa&lang=de";

  // Load snippet
  $snippet = file_get_contents( $url );

  // write snippet into html source
  echo $snippet;
 ?>
</div>

Callbacks

var fvp = oa.api.flexviewpage( conf );

fvp.whenMap( callback );

function callback( map ) {

    // do something...

}

Configuration

Standard Configuration

The standard configuration of the FlexView API chooses the content type and sets the initial map zoom and center (see example):

var conf = {
    frontendtype:   "tour",          // choose content type
    zoom:           11,              // set initial zoom level
    center:       [ 10.292, 47.546 ] // set initial map center
};

var fvp = oa.api.flexviewpage( conf );

FlexView API WebApps

The type of the FlexView instance:

tour
lodging
hut
poi
skiresort
story
offer
current condition

var conf = {

    "frontendtype": "tour", 

};

POIs

FlexView API instances of the frontend type “poi” show only POIs marked as “destination” by default (“Refine your search” checkbox “Show further POIs” is not checked). Set “check_init_destination” to true to remove this filter and to show all POIs:

conf.cfg = { filter: {check_init_destination: true} };

Constructor

// pass the configuration object to the constructor
var fvp = oa.api.flexviewpage( conf );

Modes

conf.initMode = "gallery";

Preset what-menu by passing a category id (or the id of a category group) to "selected_init":

conf.cfg = {
    "what": {
	"selected_init": "8982342"
    }
};

The category id may be evaluated with help of the FlexView API with this one liner:

fvp.flexview.catidChangeEvt().then(
    function(categoryId) {
        alert(c);
    } 
);

Hide the what-menu:

conf.whatHide = true;

Preset the where-menu by passing the id of a region to "selected_init":

conf.cfg = {
    "where": {
        "selected_init": '1044895'
    };
};

Filter

WebApp “tour” filter settings:

// initialize filter ("refine your search")
conf.cfg.filter = {
    // checkbox "easy" checked (filter easy tours)
    check_init_easy:true,

    // checkbox "Suitable for families and children" checked
    check_init_suitableforfamilies:true,
};

WebApp “condition” filter settings:

// initialize filter ("refine your search")
conf.cfg.filter = {
    condition_slider_vInit:8 // 30 days
}

// possible values:
//  0 -> today only
//  1 -> 1 day
//  2 -> 2 days
//  3 -> 3 days
//  4 -> 4 days
//  5 -> 5 days
//  6 -> 1 week (7 days)
//  7 -> 2 weeks (14 days)
//  8 -> 1 month (30 days)
//  8 -> 3 months (90 days)
// 10 -> 1 year (365 days)

Sort

// set sort order of lists:
// (sort by title asc)
conf.cfg.sort = {
    // use information out of configuration object
    selected_initFromDom : false,

    // initially sort by "distance"
    selected_init_value : "distance",

    // set initial sort order for columns (see "little arrows")
    key2ascendant_init : {
	title : true,
	distance : true
    }

};