Is there a way to update the HTML files for PC3

Kevin Sanabria · October 2020

Hi Everyone,

I'm working on modernizing and revamping our participant center. Thus far I've been able to make CSS changes via the FTP server accessing the custom.css file.

However, any attempts to update the HTML template files (topNav.html for example) prove to be unsuccessful. The changes to the file stay but whatever compiles the Angular code, doesn't get activated, thus any changes to HTML files don't get displayed. Any changes made to the dashboard.html appear as intended.

Does anyone have any experience/debug suggestions I could utilize to get HTML changes working properly?

Much appreciated!

Brian Mucha · October 2020

I think you can edit those files directly and it should work. Seems like I've needed to start a new session to see the changes.

But every time your PC3 gets updated, your changes will get clobbered. Instead I would make the changes you want in custom.js.

For instance, you can use ngLoadController to manipulate the top nav tabs. Here's adding a new tab.


var ngLoadController = function($rootScope, $scope, controller) {
    if (controller == 'pcMain') {
        $rootScope.topNavTabs.push({
            order: 3,
            label: 'My Events',
            href: $rootScope.baseUrl + '#/events',
            active: false,
            activeTest: function () {
                return $rootScope.$location.path().indexOf('/events') === 0;
            }
        });
    }
};

Of course, you have to make to contents of the tab - the 'template'. Then you tell the routeProvider about it, also in custom.js. The controller is not always necessary.


var ngRouteProvider = function($routeProvider) {
      $routeProvider.when('/events',
      {
        templateUrl: './html/view/events.html',
        controller: 'EventsViewCtrl'
      })
};

$#rootScope.topNavTabs is just an array, so you have all the array methods to otherwise manipulate it at your disposal. Reorder, change labels, etc.

You can also always use a little jQuery in custom.js to make other html changes to your rendered template.

BPM

Kevin Sanabria · October 2020

Thanks Brian Mucha‍ ! Learning to adapt to this method of HTML rendering, your examples provided great context

Curious, ngRouteProvider is not currently a function within custom.js. What is the best way to access the routeProvider?

Brian Mucha · October 2020

Here's my custom.js for an event I'm working on. Always helps to have something to look at. There are also examples in the comments.


// custom.js

/* Executes as part of the angular main initialization */
var ngLoadInit = function($rootScope) {

    $rootScope.closeSuccessDelay = 2000;

  /* Sample code: Retrieve the participant's data and fundraising progress when PC3 loads, store in the $rootScope
  $rootScope.services.TeamraiserParticipantService.getParticipant().then(function(response) {
    if (response.data && response.data.getParticipantsResponse) {
      return $rootScope.participant = response.data.getParticipantsResponse.participant;
    } else {
      return $rootScope.participant = null;
    }
  });
  $rootScope.services.TeamraiserParticipantService.getProgress().then(function(response) {
    $rootScope.fundraisingProgress = {};
    if (response.data && response.data.getParticipantProgressResponse) {
      $rootScope.fundraisingProgress.personal = response.data.getParticipantProgressResponse.personalProgress;
      if ($rootScope.participantRegistration.teamId && $rootScope.participantRegistration.teamId !== '-1') {
        $rootScope.fundraisingProgress.team = response.data.getParticipantProgressResponse.teamProgress;
      }
      if ($rootScope.participantRegistration.companyInformation && $rootScope.participantRegistration.companyInformation.companyId) {
        $rootScope.fundraisingProgress.company = response.data.getParticipantProgressResponse.companyProgress;
      }
    }
    return response;
  });
  */
  /* Sample code: Change the amount of time that success messages are displayed from 5 seconds to 3 seconds
  $rootScope.closeSuccessDelay = 3000;
  */

};

var ngRouteProvider = function($routeProvider) {

      $routeProvider.when('/events',
      {
        templateUrl: './html/view/events.html',
        // controller: 'EventsViewCtrl'
      }).when('/events/pastEvents',
      {
        templateUrl: './html/view/eventsPastEvents.html',
        // controller: 'EventsViewCtrl'
      }).when('/events/allEvents',
      {
        templateUrl: './html/view/eventsAllEvents.html',
        // controller: 'EventsViewCtrl'
      }).when('/fundraising',
      {
        templateUrl: './html/view/fundraising.html',
        // controller: 'FundrasisingViewCtrl'
      }).when('/achievements',
      {
        templateUrl: './html/view/achievements.html',
        // controller: 'AchievementsViewCtrl'
      })
};

/* Executes during a route change before the new route is loaded. */
/* redirectRoute is a function that takes a string path to the next route to redirect towards */
/* next and current are objects containing details about the $$route and params for both the next route and the current route */
var ngChangeRoute = function($rootScope, redirectRoute, next, current) {

  /* Sample code: Redirect from the '/profile' route to the standard Constituent Profile page
  if (next.originalPath == '/profile') {
    if (current.originalPath.match(/\\/profile\\//)) {
      location.href = location.origin + '/' + location.pathname.split('/')[1] + '/site/ConsProfileUser';
    } else {
      redirectRoute('/profile/options');
    }
  }
  */

  /*----------- Current Events --------------------*/

  /* UTILITIES */
  var convertDate = function(isoDate)
  {
    var date = new Date(isoDate);
    return date.toDateString();
  }

  var convertStatus = function(statusCode)
  {
    switch (statusCode)
    {
      case '0':
        return 'Unpublished';
        break;
      case '1':
        return 'Accepting registrations only';
        break;
      case '2':
        return 'Accepting registrations and gifts';
        break;
      case '3':
        return 'Accepting gifts only';
        break;
      case '4':
        return 'Closed';
        break;
      case '8':
        return 'Archived';
        break;
      case '9':
        return 'Deleted';
        break;
    }
  }

  var convertEventType = function(eventName)
  {
    // Required because this.public_event_type_name seems broken. 2018/09/11
    if ( eventName.indexOf('Move for Kids') !== -1 )    { return '3 Mile Walk'; }
    if ( eventName.indexOf('Move for the Kids') !== -1 )  { return '5K Run/1 Mile Walk'; }
    if ( eventName.indexOf('Race for the Kids') !== -1 )  { return '5K Run/1 Mile Walk'; }
    if ( eventName.indexOf('Run for Gus') !== -1 )     { return '5K Run/1 Mile Walk'; }
    if ( eventName.indexOf('Step Up for Kids') !== -1 )   { return 'Stair Climb'; }
    if ( eventName.indexOf('Marathon Team') !== -1 )    { return '26.5 Mile Run'; }
    if ( eventName.indexOf('Dance Marathon') !== -1 )    { return 'Dance, Game or Stand'; }
    if ( eventName.indexOf('Circle of Friends') !== -1 )  { return 'Do It Yourself'; }
    if ( eventName.indexOf('Team Lurie Children') !== -1 ) { return 'Do It Yourself'; }
    if ( eventName.indexOf('Tribute and Memorial') !== -1 ) { return 'Do It Yourself'; }
    return 'Event';
  }

  if( next.originalPath == '/events' || next.originalPath == '/events/pastEvents' ){

    /* getRegisteredTeamraisers call to api */
    $rootScope.services.LuminateRESTService.teamraiserRequest('getRegisteredTeamraisers',
    'response_format=json',
    false,
    true).then(function(response) {
        var container = document.getElementById("events");
        var teamraiserList = response.data.getRegisteredTeamraisersResponse.teamraiser;
        var teamraiserCounter = 1;
        var teamraiserBlock = '<div class="row">';

        teamraiserList.map(function(teamraiser) {
          var status = (($rootScope.$location.$$path == '/events') ? 'current' : 'past' );
          var statusClass = ( (teamraiser.status=="1" || teamraiser.status=="2" || teamraiser.status=="3") ? 'current' : 'past' );
          var showBlock = ( (status && status != "All" && status != statusClass) ? false : true );
          if(teamraiser.status!="8" && teamraiser.status!="9" && showBlock)
          {
              teamraiserBlock += '<div class="col-sm-4 teamraiser ' + statusClass + '">';
              teamraiserBlock += '    <div class=""><span class="tag">' + convertEventType(teamraiser.name) + '</span></div>';
              teamraiserBlock += '    <div class="title">' + teamraiser.name + '</div>';
              teamraiserBlock += '    <div class="">' + teamraiser.description + '</div>';
              teamraiserBlock += '    <div class=""><label>Event Date</label>' + convertDate(teamraiser.event_date) + '</div>';
              teamraiserBlock += '    <div class=""><label>Status</label>' + convertStatus(teamraiser.status) + '</div>';
            if(teamraiser.status=="1" || teamraiser.status=="2" || teamraiser.status=="3")
            {
              teamraiserBlock += '    <div class="">';
              teamraiserBlock += '        <p><a href="' + teamraiser.greeting_url + '" target="_blank">Home Page</a></p>';
              teamraiserBlock += '        <p><a href="http://foundation.luriechildrens.org/site/TRC/Events/TeamRaiser?fr_id=' + teamraiser.id + '&pg=center" target="_blank">Participant Center</a></p>';
              teamraiserBlock += '        <p><a href="http://foundation.luriechildrens.org/site/TRC/Events/TeamRaiser?fr_id=' + teamraiser.id + '&pg=personal&px=' + teamraiser.id + '" target="_blank">View Personal Page</a></p>';
              if(teamraiser.teamName) { teamraiserBlock += '        <p><a href="' + teamraiser.teamPageUrl + '" target="_blank">View Team Page</a></p>'; }
              teamraiserBlock += '    </div>';
            }
            teamraiserBlock += '</div>';

            if(teamraiserCounter % 3 == 0)
            {
              teamraiserBlock += '</div>';
              teamraiserBlock += '<div class="row">';
            }
            teamraiserCounter++;
          }
        })

        teamraiserBlock += '</div>';

        container.innerHTML = teamraiserBlock;
    });
  }

  /* getTeamraisersByInfo call to api */
  if( next.originalPath == '/events/allEvents' ){
    $rootScope.services.LuminateRESTService.teamraiserRequest('getTeamraisersByInfo',
    'state=IL&response_format=json',
    false,
    true).then(function(response) {
      var container = document.getElementById("events");
      var teamraiserList = response.data.getTeamraisersResponse.teamraiser;
      var teamraiserCounter = 1;
      var teamraiserBlock = '<div class="row">';

      teamraiserList.map(function(teamraiser) {
        var statusClass = ( (teamraiser.status=="1" || teamraiser.status=="2" || teamraiser.status=="3") ? 'current' : 'past' );
        var showBlock = ( (status && status != "All" && status != statusClass) ? false : true );
        if(teamraiser.status!="8" && teamraiser.status!="9")
        {
          teamraiserBlock += '<div class="col-sm-4 teamraiser ' + statusClass + '">';
          teamraiserBlock += '    <div class=""><span class="tag">' + convertEventType(teamraiser.name) + '</span></div>';
          teamraiserBlock += '    <div class="title">' + teamraiser.name + '</div>';
          teamraiserBlock += '    <div class="">' + teamraiser.description + '</div>';
          teamraiserBlock += '    <div class=""><label>Event Date</label>' + convertDate(teamraiser.event_date) + '</div>';
          teamraiserBlock += '    <div class=""><label>Status</label>' + convertStatus(teamraiser.status) + '</div>';
          if(teamraiser.status=="1" || teamraiser.status=="2" || teamraiser.status=="3")
          {
            teamraiserBlock += '    <div class="">';
            teamraiserBlock += '        <p><a href="' + teamraiser.greeting_url + '" target="_blank">Home Page</a></p>';
            if(teamraiser.status=="1" || teamraiser.status=="2")
            {
              if(teamraiser.reg_indiv_url)   { teamraiserBlock += '        <p><a href="' + teamraiser.reg_indiv_url + '" target="_blank">Join as an Individual</a></p>'; }
              if(teamraiser.reg_new_team_url) { teamraiserBlock += '        <p><a href="' + teamraiser.reg_new_team_url + '" target="_blank">Form a New Team</a></p>'; }
              if(teamraiser.reg_join_team_url) { teamraiserBlock += '        <p><a href="' + teamraiser.reg_join_team_url + '" target="_blank">Join an Existing Team</a></p>'; }
            }
            teamraiserBlock += '    </div>';
          }
          teamraiserBlock += '</div>';

          if(teamraiserCounter % 3 == 0)
          {
            teamraiserBlock += '</div>';
            teamraiserBlock += '<div class="row">';
          }
          teamraiserCounter++;
        }
      })

      teamraiserBlock += '</div>';

      container.innerHTML = teamraiserBlock;
    });
  }

/*-------------------------------*/

};

/* Executes after a modal window is loaded. */
/* $rootScope.services contains references to each of the services loaded in the current modal
   $scope defines the current scope for this modal
   modal is a text value denoting which modal window is being loaded */
var ngLoadModal = function($rootScope, $scope, modal) {

  /* Sample code: Remove the ".00" input-addon after the Goal input on editGoal modals
  if (modal in ['editParticipantGoal','editTeamGoal']) {
    angular.element('#goal').next('.input-group-addon').remove();
  }
  */

};

/* Executes after each controller loads. */
/* $rootScope.services contains references to each of the services loaded in the current controller
   $scope defines the current scope for this controller
   controller is a text value denoting which controller is being loaded */
var ngLoadController = function($rootScope, $scope, controller) {

    if (controller == 'pcMain') {

    $rootScope.services.LuminateRESTService.consRequest('loginTest').then(function(response) {
      var consID = response.data.loginResponse.cons_id;
      if ( consID ) {
          var welcomeMessage = document.getElementById('participant_welcome');
          $rootScope.services.LuminateRESTService.consRequest('getUser',
          consID,
          true).then(function(response) {
            var userFirstName = response.data.getConsResponse.name.first;
            welcomeMessage.textContent = userFirstName;
          })
        }
    })

        $rootScope.topNavTabs.push({
            order: 3,
            label: 'My Events',
            href: $rootScope.baseUrl + '#/events',
            active: false,
            activeTest: function () {
                return $rootScope.$location.path().indexOf('/events') === 0;
            }
        });

        $rootScope.topNavTabs.push({
            order: 4,
            label: 'Fundraising',
            href: $rootScope.baseUrl + '#/fundraising',
            active: false,
            activeTest: function () {
                return $rootScope.$location.path().indexOf('/fundraising') === 0;
            }
        });

        $rootScope.topNavTabs.push({
            order: 5,
            label: 'Achievements',
            href: $rootScope.baseUrl + '#/achievements',
            active: false,
            activeTest: function () {
                return $rootScope.$location.path().indexOf('/achievements') === 0;
            }
        });

    }

    /* Sample code: Adjust the image height/width for personal and team pages to 400px by 300px*/
  if (controller == 'homeView') {
    $scope.personalPage.photoSizes.image1.width = 250;
    $scope.personalPage.photoSizes.image1.height = 250;
    $scope.personalPage.photoSizes.image2.width = 250;
    $scope.personalPage.photoSizes.image2.height = 250;

    if ( $scope.teamPage ) {
      $scope.teamPage.photoSize.width = 250;
      $scope.teamPage.photoSize.height = 250;
    }
  }

  /* Sample code: replace specific text in the email message body with dynamic values
  if (controller == 'emailComposeView') {
    $scope.individual_participant = 'Individual Participant';
    $scope.setEmailMessageBody = function(messageBody) {
      if (messageBody == null) {
        messageBody = '';
      }
      if (($rootScope.fundraisingProgress.participant == null) || ($rootScope.participant == null) || ($rootScope.participantRegistration == null)) {
        return $timeout(function() {
          return setEmailMessageBody(messageBody);
        }, 500);
      } else {
        if (!messageBody || !angular.isString(messageBody)) {
          messageBody = '';
        }
        var replaceMap = {
          fundraisingGoal: Math.floor(parseInt($rootScope.fundraisingProgress.participant.goal) / 100),
          amountRaised: Math.floor(parseInt($rootScope.fundraisingProgress.participant.raised) / 100),
          eventName: $rootScope.participant.eventName || '',
          personalPage: $rootScope.participant.personalPageUrl || '',
          teamName: $scope.individual_participant,
          teamPage: $scope.individual_participant,
          teamGoal: '',
          participantName: $rootScope.participant.name.first + ' ' + $rootScope.participant.name.last
        };
        if ($rootScope.participantRegistration.teamId !== '-1') {
          replaceMap.teamName = $rootScope.participant.teamName;
          replaceMap.teamPage = $rootScope.participant.teamPageUrl;
          replaceMap.teamGoal = Math.floor(parseInt($rootScope.fundraisingProgress.team.goal) / 100);
        }
        angular.forEach(replaceMap, function(replaceValue, replaceKey) {
          var replaceText = new RegExp('\\{' + replaceKey + '\\}', 'g');
          return messageBody = messageBody.replace(replaceText, replaceValue);
        });
        return $scope.emailComposer.message_body = messageBody;
      }
    };
  }
  */
  /* Sample code: Adjust the image height/width for personal and team pages to 400px by 300px
  if (controller == 'homeView') {
    $scope.personalPage.photoSizes.image1.width = 400;
    $scope.personalPage.photoSizes.image1.height = 300;
    $scope.personalPage.photoSizes.image2.width = 400;
    $scope.personalPage.photoSizes.image2.height = 300;
    $scope.teamPage.photoSize.width = 400;
    $scope.teamPage.photoSize.height = 300;
  }
  */

};

/* Executes after receiving a response from an API call, to allow manipulation of the response before it is processed. */
/* $rootScope references the root scope object of the Angular PC3 application
   requestDetails is an object with the following properties:
     apiServlet: String (required) defining the API Servlet such as 'CRConsAPI' or 'CRTeamraiserAPI'
     method: String (required) defining the API 'method' such as 'getUser' or 'getSuggestedMessage'
     requestData: String (optional) defining the additional parameters included in the API call
     requestFormData: FormData (optional) defining the additional parameters included in the API call
     contentType: String (required), either 'multipart/form-data' when submitted with requestFormData or 'application/x-www-form-urlencoded; charset=UTF-8' otherwise
     frId: String (optional) defining the fr_id value for the current TeamRaiser event
   responseData is a JSON object containing the "data" of the response from the API call.
   This function should always return a "responseData" value for further processing.  */
var ngCustomCallback = function($rootScope, requestDetails, responseData) {
  return responseData;
}

Kevin Sanabria · November 2020

Brian Mucha‍, this has been incredibly helpful. Curious, my RouteProvider appears to be correct, but the route still isnt serving my custom html files. Did you do anything specifically to the HTML or add/change something in the JS? I console logged the controller and see the customctrl is linked to the custom pages I made, which tells me the RouteProvider is properly linked.

This is my custom JS :

$routeProvider.when('/home', {

          templateUrl: './html/view/home.html',

          controller: 'HomeViewCtrl'

        }).when('/dashboard', {

          templateUrl: './html/view/dashboard.html',

          controller: 'CustomViewCtrl'

        }).when('/community', {

          templateUrl: './html/view/community.html',

          controller: 'CustomViewCtrl'

        }).when('/resources', {

          templateUrl: './html/view/resources.html',

          controller: 'CustomViewCtrl'

        })

I've linked to the CustomViewCtrl as a test.

here is my dashboard.html:

<div>

    <div class="row">

        <div class="col-sm-12" ng-bind-html="content">

            <h1>Dashboard Page</h1>

        </div>

    </div>

</div>

Left it bare as a test. I also copied the format from the custom page that is in the folder.

Any help is much appreciated!

Brian Mucha · November 2020

I didn't change any of the stock JS, everything is in custom.

There is a dashboard.html already in the stock PC. I wonder if you can also connect to that view here like this.

What does your CustomViewCtrl controller look like?

Kevin Sanabria · November 2020

I attempted to change the routeprovider via the method you provided in your code, but I couldn't get it to work. The additions to the routeProvider are the only changes I made to the main.js file. Otherwise, all changes to the rootscope are done in the custom.js file. I also changed the name of my dashboard.html to avoid any potential namespace issue. The issue still persists. I only linked my custom pages to the Custom View Ctrl to see if that ng-bind-html attribute helps link the content. The issue still exists without linking a controller,

This is the CustomViewCtrl (that is already part of the main.js file)

angular.module('trPcControllers').controller('CustomViewCtrl', [

      '$scope',

      '$rootScope',

      '$sce',

      'LuminateUtilsService',

      function ($scope,

        $rootScope,

        $sce,

        LuminateUtilsService) {

        $scope.updateContent = function (html) {

          $scope.content = $sce.trustAsHtml(LuminateUtilsService.ensureString(html));

          return $scope.content;

        };

        $scope.updateContent();

        if (window.ngLoadController && angular.isFunction(ngLoadController)) {

          return ngLoadController($rootScope,

            $scope,

            'customView');

        }

      }

    ]);

Brian Mucha · November 2020

I'm working with version 301.0 which doesn't have this CustomViewCtrl in main.js. Which version are you working with?

I just spent some time fooling with a new 301.0.44 version of the PC and it doesn't seem to work at all for me, even without any customizations. I get the nav bar, a login dialog with no labels, and that's it. Login fails too.

Kevin Sanabria · November 2020

I believe we have found the first clue in the issues I am having, I am running on version 301.0.44. There is also no function for the RouteProvider in the stock custom.js file in my PC version, which is where I first noticed a discrepancy with your code vs mine. I have spent a couple days running through the main.js file to see how it parses the custom html view; however, I have had no luck.

I am going to attempt to see what implications there are rolling back to 301.0. Appreciate all the help Brian, it is really appreciated

Brian Mucha · November 2020

I did a bit of hunting through my old files from when we first built this a year or so ago. Haven't thought about it in a while.

We actually did a ton of editing to main.js while we were first figuring all this out, including editing the routeProvider directly just like you did. I really wanted to not do that though.

Turns out the reason that a ngRouteProvider example was not in the custom,js was that BB didn't connect routeProvider to custom.js (at least not back then.)

Here's the otherwise statement in the stock main.js (v 301.0)


        .otherwise({
          redirectTo: (function () {
            var pcPage,
              urlSearch;
            // redirect PC1-style URLs
            urlSearch = window.location.search;
            pcPage = urlSearch.match(/pc2_page=\\w*&/);
            if (pcPage && pcPage.length > 0 && pcPage[0].slice(9,
              -1) === 'mtype') {
              return '/email/compose';
            } else {
              return '/home';
            }
          })()

Turns out we did have to update that to...


        .otherwise({
         redirectTo: (function() {
           if (window.ngRouteProvider && angular.isFunction(ngRouteProvider)) {
             return ngRouteProvider($routeProvider);
           } else {
             return '/home';
           }
        })()

Without this change it's not clear how Blackbaud ever intended for us to be able to add tabs. I recall suggesting this needed to be done when we were early testers, but I don't think I heard anything back.

Sorry, it's been a long time since I worked on this. Angular isn't my thing so it took a long time to figure out, surprised I forgot!

BPM

Brian Mucha · November 2020

Okay, I got 301.0.44 working.

Found this interesting.

Function: ngChangeRoute

The "ngChangeRoute" function is executed during a route change, when transitioning from one view to another, before the new route is loaded. It is passed the "$rootScope" variable, a "redirectRoute" function that can be used to manually transition to a different route, and "next" and "current" variables that define the destination view and the current view. This function is appropriate when adding new views or changing the behavior when transitioning from one view to another. All customizations in this function should be contained within an "if" statement using either the "next" or "current" variables so the customization is only executed during the desired transition.
https://www.blackbaud.com/support/howto/coveo/luminate-online/subsystems/teamraiser/concepts/admin_teamraiser_pc3custom.html

Here's what I think Blackbaud intended. That new Custom route is an empty placeholder that we can redirect to where ever we want using ngChangeRoute.


var ngChangeRoute = function($rootScope, redirectRoute, next, current) {
  if (next.originalPath == '/custom') {
    location.href = 'http://google.com';
  }
};

Presumably this would be a PageBuilder page or whatever rather than Google. Of course this doesn't get us more than one extra view in the PC without editing main.js to add more views and controllers. And that 'view' wouldn't really be a view, so you don't get any of the PC3 functionality.

I still don't see a way to get around editing main.js or the custom view.

EDIT:

Here's what I wound up with so far. Starting around line 279 in main.js...


        .otherwise({
        redirectTo: (function() {
          var pcPage, urlSearch;
          // redirect PC1-style URLs
          urlSearch = window.location.search;
          pcPage = urlSearch.match(/pc2_page=\\w*&/);
          if (pcPage && pcPage.length > 0 && pcPage[0].slice(9, -1) === 'mtype') {
            return '/email/compose';
          } else if (window.ngRouteProvider && angular.isFunction(ngRouteProvider)) {  // Custom
             return ngRouteProvider($routeProvider);  // Custom
           } else {
             return '/home';
           }
        })()

This preserves the ability to connect to email from the old url format, which I had simply removed before. Not sure why we would need that or why they only bothered supporting that one link. (It would be easy to add a few more else ifs to test for something other than 'mtype'.)

And then in custom.js you can add as many more views as you want.

Looks like 301.0.44 does not find pcMain during ngLoadController, which is why the new tabs were not added. I moved this to ngLoadInit, which is probably where it should have been all along.

Here's all the important custom.js parts...


var ngLoadInit = function($rootScope) {
    $rootScope.topNavTabs.push({
      order: 3,
      label: 'My Events',
      href: $rootScope.baseUrl + '#/events',
      active: false,
      activeTest: function () {
        return $rootScope.$location.path().indexOf('/events') === 0;
      }
    });
    $rootScope.topNavTabs.push({
      order: 4,
      label: 'Fundraising',
      href: $rootScope.baseUrl + '#/fundraising',
      active: false,
      activeTest: function () {
        return $rootScope.$location.path().indexOf('/fundraising') === 0;
      }
    });
    $rootScope.topNavTabs.push({
      order: 5,
      label: 'Achievements',
      href: $rootScope.baseUrl + '#/achievements',
      active: false,
      activeTest: function () {
        return $rootScope.$location.path().indexOf('/achievements') === 0;
      }
    });
};

var ngRouteProvider = function($routeProvider) {
  $routeProvider.when('/events',
  {
    templateUrl: './html/view/events.html',
    controller: 'CustomViewCtrl'
  }).when('/events/pastEvents',
  {
    templateUrl: './html/view/eventsPastEvents.html',
    controller: 'CustomViewCtrl'
  }).when('/events/allEvents',
  {
    templateUrl: './html/view/eventsAllEvents.html',
    controller: 'CustomViewCtrl'
  }).when('/fundraising',
  {
    templateUrl: './html/view/fundraising.html',
    controller: 'CustomViewCtrl'
  }).when('/achievements',
  {
    templateUrl: './html/view/achievements.html',
    controller: 'CustomViewCtrl'
  }).when('/',
  {
    redirectTo:'/home'
  });
};

Notice that I wound up using the simple 'CustomViewCtrl' for everything so those pages can use variables like {{baseUrl}}. I couldn't figure out a way to add my own custom controller from custom.js. I think if those are needed, they have to be in main.js.

Of course don't forget to minify your newly edited main.js and update main.min.js with that compressed code.

BPM

Kevin Sanabria · November 2020

Hi Brian,

Amazing discovery and very insightful. I had discovered previously that additional navItems had to be added in ngLoadInit but that was as far as I got before caving and changing the main.js file. The adding of PageBuilder may come in handy in the future, but as you said, won't provide the PC functionality, but may be useful in the future.

However, seems like I will have to add your code snippet to the routeProvider to use it in the custom file. Either way, seems like changing the main.js is the only option to add additional customizing to my clients liking.

I really appreciate the digging around Brian. This will also be useful information for anyone else looking to do the same in the future.

Is there a way to update the HTML files for PC3

Comments

Categories