Skip to content

How to use Navigation

Jump to bottom
o5faruk edited this page May 2, 2021 · 18 revisions

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/navigation/

⚠️⚠️⚠️

buildfire.navigation

Use this property to navigate to other plugins, home or even an external web page

buildfire.navigation.navigateTo (pluginData)

Use this method to navigate away to a different plugin. This is used commonly in Launcher or Folder type plugins.

  • pluginData (object)
    • pluginId (string) The id of the plugin type you'd like to navigate to.
    • instanceId (string) The the instance of the plugin you'd like to navigate to.
    • folderName (string) Optional. The folder name of the plugin that you'd like to navigate to.
    • title (string) Optional. The title that should show up in the title bar once the plugin is loaded.
    • queryString (string) Optional. This is a query string that will be passed to the next plugin's window.location.search. example: "name=Larry&age=36&showDetails=true"

At minimum either the plugin id or the instance id must be provided. If a plugin id is passed without an instance id then the first instance of the specified plugin type will be navigated to.

buildfire.navigation.navigateToSocialWall (options, callback)

This method is quick shortcut to navigate to community wall plugins without having to specify the community wall plugin type id. A common use for it is to navigate to any social wall instance without having to specify an instance id or a plugin type id.

If no community wall instance is found, it will try to look for a premium social wall instance. If not, lastly will check for a social wall instance.

  • options (object)
    • title (string) Optional. The title that should show up in the title bar once the plugin is loaded.
    • queryString (string) Optional. This is a query string that will be passed to the next plugin's window.location.search. example: "name=Larry&age=36&showDetails=true"
    • wallUserIds (array) Optional. Users Ids you want to create a wall id for, where the generated wall id for social users will be appended to the options.querystring.
    • pluginTypeOrder (array) Optional. The developer can use this option to change the default order we will be using to look for instances based on the type (community wall => premium social wall => social wall). Index 0 has the highest priority. Supported types are: ['community', 'premium_social', 'social']

buildfire.navigation.navigateHome ()

Closes out the current plugin and navigates to the Home Plugin.

buildfire.navigation.openWindow: function(url,target,callback)

Use this to open a web page in the app browser or in the system browser

arguments

  • url (string) contains the url of the web page you'd like to open
  • target (string) Optional value that indicates how to open the web page
    • _blank [Default] open web page in app browser
    • _system open web page in system browser
  • callback a function that gets called when the window closes

example buildfire.navigation.openWindow('http://google.com','_system');

buildfire.navigation.onBackButtonClick: function()

This handler will be called when the user clicks on the back button on the title bar or hits the back button on their phone (if applicable). You can override this handler to modify they behavior within your own plugin.

example

var goBack = buildfire.navigation.onBackButtonClick ;
buildfire.navigation.onBackButtonClick = function(){
    // check to see if details div is visible
    var div = document.getElementById('divDetails');
    if (div.style.display != 'none'){
        //this means the details div is visible so when 
        //the user clicks the back button hide it
        div.style.display ='none';
    }
    else{
        // this means they are at the root of the plugin so assume default behavior
        goBack();
    }
}

buildfire.navigation.restoreBackButtonClick: function()

This function will restore the original functionality of buildfire.navigation.onBackButtonClick if it was overridden.

example

// override handler
buildfire.navigation.onBackButtonClick = function(){
    // .. do something
}

// bring back original functionality
buildfire.navigation.restoreBackButtonClick();

buildfire.navigation.goBack: function()

This function will trigger the Back functionality.

example

buildfire.navigation.goBack()

buildfire.navigation.makeSafeLinks: function(element)

Use this method after assigning the html data to the container div for forcing the external links in your data (WYSIWYG) to open up using the InAppBrowser otherwise it will open a link in the app itself and the user can't find a way to go back to the app :

This is used commonly after assigning the data from WYSIWYG control in your widget.

arguments

  • element the id of the container div or the parent div object

example

buildfire.navigation.makeSafeLinks("my_container_div");

or

var element = document.getElementById("my_container_div");
buildfire.navigation.makeSafeLinks(element);

buildfire.navigation.scrollTop: function(callback)

Use this method to have the containing Control Panel page to scroll up to the top. This is usually used when hiding and showing content in the plugin that may cause the page to scroll down further than the content.

For example if you are developing a singe page plugin with multiple views. The main view has a long list of items to click on. The user scrolls down to find the item he'd like to open and clicks on it. the main view is not hidden and the detailed view is not showing. However, since the detailed view is short its at the very top of the page. Scrolling the pluin page alone wont suffice you need to scroll the web site as well. this is where scrollTop comes in handy

arguments

  • callback Optional. A function that gets called after execution

example

buildfire.navigation.scrollTop();

portal . twitter . facebook

Clone this wiki locally