You are viewing limited content. For full access, please sign in.

Question

Question

Adding custom elements to WebLink welcome page

asked on July 29, 2020

I have a customer who wants to replicate the quick links table as shown here:

http://24.43.32.143/WebLink/Welcome.aspx?repo=CityofCostaMesa&dbid=0

I thought we could just copy the HTML and add it to the welcome.aspx file but it looks like WebLink is built with Angular now (not sure if it was in the past). We found the spot in the welcome.component.ts file that we'd like to insert the HTML, but obviously it's not that simple since we need to rebuild the site (which involves installing Angular, creating a project, importing the files, building, hosting the new build, etc...)

At this point, I'm hoping that I'm simply overthinking the process and there is a simpler way of adding custom HTML to the welcome page. Has anyone had success with this? Is it even supported? The customer says that he learned about the technique at an Empower conference and that specific City of Costa Mesa site was referenced, so he's pretty sure that there is an 'official' way to accomplish this.

0 0

Answer

SELECTED ANSWER
replied on July 30, 2020

Brian,

After seeing your reply I went ahead and updated to 10.2 and you are absolutely correct when saying the whole process has changed in the welcome.aspx file. After playing around for a bit on how to accomplish what you are asking I decided to go the JavaScript / jQuery route. Below is the code (copy and paste it right before the </body> element) that can be used to modify portions of the Welcome page once all of the elements are loaded (this is due to the page now being rendered using Ajax calls). Just remember to replace the HTML code that I have in the append function with your own.

 

<script type="application/javascript" nonce="<%= PageNonce %>">
function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}	

waitForElement("#SearchFormDiv").then(function(element) {
	$('#SearchFormDiv').append('<div style="min-height:0px;max-width:700px;margin:auto;margin-top:30px;">'+ Date() +'</div>');
});
</script>

 

2 0

Replies

replied on July 29, 2020

Brian,

I just took the code you are referring to and plopped it directly into the welcome.aspx file, saved, refreshed and it worked just fine (using WebLink 10.1.0.60). It appears that they put their code right after the <!-- Search Results --> comment line.

2 0
replied on July 29, 2020

Hi Wes,

That's what I was expecting to do as well, but it looks like in WebLink 10.2 they've changed to Angular. Now the welcome.aspx file is just some headers and a body with a JS import statement for the welcome component, no real HTML on that page.

1 0
SELECTED ANSWER
replied on July 30, 2020

Brian,

After seeing your reply I went ahead and updated to 10.2 and you are absolutely correct when saying the whole process has changed in the welcome.aspx file. After playing around for a bit on how to accomplish what you are asking I decided to go the JavaScript / jQuery route. Below is the code (copy and paste it right before the </body> element) that can be used to modify portions of the Welcome page once all of the elements are loaded (this is due to the page now being rendered using Ajax calls). Just remember to replace the HTML code that I have in the append function with your own.

 

<script type="application/javascript" nonce="<%= PageNonce %>">
function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}	

waitForElement("#SearchFormDiv").then(function(element) {
	$('#SearchFormDiv').append('<div style="min-height:0px;max-width:700px;margin:auto;margin-top:30px;">'+ Date() +'</div>');
});
</script>

 

2 0
replied on July 30, 2020

That looks like a great solution, thanks Wes!

0 0
replied on July 31, 2020

We just tried it on the customer's system and it worked great. Much easier than rebuilding the site. Thanks again Wes!

0 0
replied on July 31, 2020

That's great to hear Brian and glad that it helped!

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.