Webappbuilder need link in header controller to open about page

706
2
Jump to solution
05-04-2017 11:29 AM
Anish_Adhikari
Occasional Contributor

I am trying to set-up link section of the header controller so that when I click on it, it opens the about widget(in panel) which contains help file on how to use the application. I would appreciate any help.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Anish,

  Sure here is some code for that. This is code for the HeaderController Widget.js file:

Line 11 has to match the lebel of your link you want to open the help from.

Line 38 has to be the exact id of the about widget in your app (check the main config.json for this)

      _createDynamicLinks: function(links) {
        if (window.isRTL) {
          var _links = [];
          array.forEach(links, function(link) {
            _links.unshift(link);
          });
          links = _links;
        }
        html.empty(this.dynamicLinksNode);
        array.forEach(links, function(link) {
          if(link.label === "Need Help? Click Here"){
            html.create('a', {
              href: '#',
              target: '_self',
              innerHTML: utils.sanitizeHTML(link.label),
              click: lang.hitch(this, this.showHelp),
              'class': "jimu-link jimu-align-leading jimu-leading-margin1",
              style: {
                lineHeight: this.height + 'px'
              }
            }, this.dynamicLinksNode);
          }else{
            html.create('a', {
              href: link.url,
              target: '_blank',
              rel: 'noopener noreferrer',
              innerHTML: utils.sanitizeHTML(link.label),
              'class': "jimu-link jimu-align-leading jimu-leading-margin1",
              style: {
                lineHeight: this.height + 'px'
              }
            }, this.dynamicLinksNode);
          }
        }, this);
      },

      showHelp: function() {
        var config = this.getConfigById("widgets_About_Widget_47");
        this._showIconContent(config);
      },

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Anish,

  Sure here is some code for that. This is code for the HeaderController Widget.js file:

Line 11 has to match the lebel of your link you want to open the help from.

Line 38 has to be the exact id of the about widget in your app (check the main config.json for this)

      _createDynamicLinks: function(links) {
        if (window.isRTL) {
          var _links = [];
          array.forEach(links, function(link) {
            _links.unshift(link);
          });
          links = _links;
        }
        html.empty(this.dynamicLinksNode);
        array.forEach(links, function(link) {
          if(link.label === "Need Help? Click Here"){
            html.create('a', {
              href: '#',
              target: '_self',
              innerHTML: utils.sanitizeHTML(link.label),
              click: lang.hitch(this, this.showHelp),
              'class': "jimu-link jimu-align-leading jimu-leading-margin1",
              style: {
                lineHeight: this.height + 'px'
              }
            }, this.dynamicLinksNode);
          }else{
            html.create('a', {
              href: link.url,
              target: '_blank',
              rel: 'noopener noreferrer',
              innerHTML: utils.sanitizeHTML(link.label),
              'class': "jimu-link jimu-align-leading jimu-leading-margin1",
              style: {
                lineHeight: this.height + 'px'
              }
            }, this.dynamicLinksNode);
          }
        }, this);
      },

      showHelp: function() {
        var config = this.getConfigById("widgets_About_Widget_47");
        this._showIconContent(config);
      },
Anish_Adhikari
Occasional Contributor

Thanks Robert. It worked great !!!

0 Kudos