FrogCode Widgets
Forum widget add a forum to a site add a forum to a page create forum on a site create forum on a page forums on a page forums on a site site forums page forums new forum on a site new forum on a page what is the forum widget what does the forum widget do how do I use the forum widget

page to external link widget.png  External links on your Site's Navigation

 

Adding extra options to a site menu

A useful hack for menus

 

UPDATED - FrogCode widget

 

A popular request on the Ideas Portal is to be able to add external links to a site's menu and to be able to link directly to a sub page of a site.  While we're waiting on such a development, this tutorial should allow you to replicate the end-user functionality.

To make things easier, we have created a FrogCode widget that handles most of the code for you.

You can still use the HTML code but either can change Frog's menus to:

  • Open another page on the same site
  • Open an external website in a new tab
  • Open a Frog Site

Download widget...   Download

 

Not used FrogCode before?
Click here
to find out how to install a downloaded widget

 

You will need one widget for each page link you wish to alter.  You only need to add this widget to the front page of your site.

Once installed, you can now find your links:
 


 

Preferences


The Label preference makes it easier for you to identify the widget if you have more than one Page to External Widget on your site.

Link URL is always the target and while external websites are easiest, it is possible to open subpages and even other sites using this widget.

Page allows you to use the page selector preference to identify the page link you wish to overwrite.
 

Link to a subpage from the top menu


To link to a subpage, we need to identify the data-uuid of the page.  This screencast shows what you need to look for...
 

Screencast


Paste this result into the Link URL box and close the developer console
 

Link to another site


In order to link to another site, we need the Site's alias (named link in the developer tools).  To get this link, we have create a bookmarklet for Google Chrome browsers.   

In order to install this bookmarklet, simply drag the text link below into Chrome's bookmark bar...
 


The site's alias is copied to your clipboard.  You can then add this to the Link URL preference.


Using HTML

Step 1


On your site with multiple pages, right-click on the menu link you want to go somewhere else and choose Inspect
 

Step 2


Copy the data-uuid value - This screencast shows what you need to look for...
 

Screencast

Step 3


Copy the codes below into an HTML widget on the front page of your site.   

Important! If your code is not on the first page to load, the code will not run

 

<script type="text/javascript">
    // On Dashboards, menus get re-rendered after the pages are loaded!!
    setTimeout(function() {
        var $menu,
            uuidMap = {
                /* Opens a sub page */ 
                "Empty page UUID":"Target page UUID",
                /* Opens an internet site */
                "Empty page UUID":"http://forum.froginfra.net/",
                /* Opens another stite in FrogLearn */
                "Empty page UUID":"Site Link"

            };
        // polyfil for Curie RC3
        polyfil: {
            if (this === window) {
                this.element = arguments[0];
                this.elements = {
                    site: this.element.closest('.sites_core'),
                    page: this.element.closest('.sites_page')
                };
            }
        
            if (!FrogOS || !FrogOS.openSite) {
                window.FrogOS = FrogOS || {};
                window.FrogOS.openSite = function(o){$('.os_core:first').trigger('os.app.siteviewer',{data:o}); return FrogOS;};
            }
        }
        $menu = this.elements.site.find('.sites_menu');
        for (var from in uuidMap) {
            $menu.find('a[data-uuid='+from+']').on('click', function(ev) {
                var uuid,target;
                uuid = jQuery(ev.target).parent().data('uuid');
                if (!uuid) {
                    uuid = jQuery(ev.target).parent().parent().data('uuid');
                }
                if (!uuid) {
                    uuid = jQuery(ev.target).data('uuid');
                }
                target = uuidMap[uuid];
                if (target) {
                    ev.stopImmediatePropagation();
                    if (target.match(/http[s]*:\/\//g)) {
                        window.open(target, '_blank');
                        return;
                    }
                
                    if (target.match(/\/[^\/]+\/[a-z0-9_.]+\//gi)) {
                        FrogOS.openSite({ site: target });
                        return;
                    }
                
                    $menu.trigger('sites.changeLocation', {
                        uuid: target
                    });
                }
            });
        }
    }.bind(this));
</script>

Link to a subpage from the top menu


Replace "Empty page UUID" and "Target page UUID" with your pages. 
 

Link to an external website


To have a menu element open an external website from a menu, use the following code, replacing "Empty page UUID" with the menu item's UUID and http://forum.froginfra.net/ with the web address
 

Link to another site


In order to link to another site, we need the Site's alias (named link in the developer tools).  To get this link, we have create a bookmarklet for Google Chrome browsers.   

In order to install this bookmarklet, simply drag the text link below into Chrome's bookmark bar...
 

Once installed:

  • Click the bookmark
  • Click anywhere on the site you wish to link to
  • The bookmark's code will copy the site's link to your clipboard.
  • Paste this into the code replacing Site link with the contents of your clipboard
  • Use the guide above to determine the empty page's UUID to replace "Empty page UUID"

How to install a widget


If you are not sure how to install one of the FrogCode widgets please take a look at the following video tutorial....

Important Information

The Package Manager application is required to create and install FrogCode applications and widgets. By default, it is not available to any group, including Admins.  This can be added in Groups and Policies.

To create your own widgets, you will need to activate FrogCode Editor, please contact the Frog Support team. Call through on 01422 395939.