1

First, the disclaimer, I am not a developer. I am an Interaction Designer with average web skills and am trying to build an intranet within the confines of very limited Google Sites web building tools.

What I'm trying to accomplish:

I'm using a Google Site that has left-hand navigation for the main pages. Those main pages all link to product pages, and each product page has 7 sub pages (sometime less, never more).

I would like those sub-pages to appear in a horizontal row of tabs at the top.

The problem:

Google Site builder tools are very limited. I can have it present an automatic sub-page listing, but the only option it provides is to have the list of links appear in a vertical list.

From looking through the Google Site Help forums, this is by design, because Google seems to think that they know better than anyone. The response is that a sub-page list should only ever be vertical so that it has room to grow.

Fair enough, but we have standardized the structure for our product pages, and since we already have a vertical navigation bar for the main web content, it's also bad design practice to have a second level of vertical menus, so it is our choice to have the sub-pages appear as a horizontal navigation bar. But, Google Site builder tools do not provide any way of doing this.

I have been searching for a long time looking for a solution. I have investigated AwesomeTables, which are, yes, Awesome, but I don't want to hard-code my sub-page URLs in a spreadsheet just so I can get the web UI to look and behave the way I want.

I'm not one to give up, but I'm reaching the limits of my current abilities, not to mention my patience. This should be a simple task, and I have colleagues waiting for me to publish our intranet content so that we can get back to the business of being productive.

So, finally, to my question:

Can I use a Google Apps Script to create a horizontal row of tabs that are context-specific to the current top-level page and which will automatically generate links to the relevant sub-pages?

Is this what Fetch URL can do?

I have implemented a few pre-baked Apps Scripts already, so I understand the basic concepts, but I'm not able to create my own at this point.

I have been able to use the Custom HTML widget in the Google Site builder tools to create CSS decorated tabs, but I need to manually add the URL for every sub-page, and this will not scale with the size of my organization and the amount of content that multiple-authors need to contribute to.

Google Sites already has an automatic vertical sub-page listing widget.

I need that widget to display as horizontal tabs.

My guess is that can be accomplished with about 7 lines of code in a Google Apps Script.

Can anyone please provide some guidance on what those lines of code should look like? :-)

Update: I found this answer which I'm trying to modify as follows:

function doGet() {
  var app=UiApp.createApplication().setTitle("Directory of this site")
  var mainPanel = app.createAbsolutePanel().setStyleAttributes({background:'beige',padding:'20px'});
  var scroll = app.createScrollPanel().setPixelSize(450,300);
  var site = SitesApp.getSiteByUrl('https://<siteURL>/');
  var thisPage = SitesApp.getActivePage();
  var pages = thisPage.getAllDescendants();
  var grid = app.createGrid(pages.length,2).setWidth(400)
    for(n=0;n<pages.length;++n){
    grid.setText(n, 0, pages[n].getName()).setWidget(n, 1, app.createAnchor('open', pages[n].getUrl()))
    }
    app.add(mainPanel.add(scroll.add(grid)))
    return app
}

I thought that by adding a new var thisPage and having it call getActivePages that I could then feed that variable through 'pages' so that getAllDecendants is being filtered by 'thisPage' ...

However, it draws the beige background as defined in the 'grid' styling, but i'm not getting my list of URLs.

My first hurdle is simply to get the list of sub-pages based on the current page. I'm not looking for the code to be written for me, but I do appreciate any general help of how to create a hierarchy of variables so that my output of getAllDecendants is in the context of my thisPage variable.

I'll worry about decoration in a follow-up question, as this grid presentation is not what I want, but I'll build this up one item at a time, since I agree the initial question posed is a bit broad.

Many thanks in advance.

Jeremy

Community
  • 1
  • 1
Jeremy Kerr
  • 11
  • 4
  • question is too broad as it doesnt show your atrempts. yes its possible from an apps script gadget to detect the url it is sitting at. with that you can build your custom interface. possibly SitesApp.getActivePage() helps. – Zig Mandel May 18 '16 at 16:18
  • I'm not sure how you determine this question is too broad. I tried to clearly define what I'm trying to accomplish, the limitations of Google Site builder tools that I need to work around, as well as my attempts using the tools I have access to and am familiar with. I also clearly stated that I am not a developer, nor do I currently have the knowledge to write an apps script from scratch. I also clearly stated that I need to detect the URL of the sub-pages, in context of the current page, so that I can use URLs to build a horizontal tab navigation bar. I'm looking for help to get started. – Jeremy Kerr May 18 '16 at 16:24
  • 1
    The reason why it's too broad is because since your not too familiar with apps script coding, your essentially looking for a complete coding solution to accomplish your needs. We can help point you in the right direction with certain lines of codes but not everyone around here will be willing to help by digging for a whole solution. If you don't have the skills to at least get some kind coding attempts at a solution to share here, then what you're looking for is a paid service, such as freelancing, someone that'll code and develop it for you for a fee. – Gerneio May 18 '16 at 16:50
  • @Gerneio, that is a fair response. So I will break this down in to specifics. I have since found [This answer](http://stackoverflow.com/questions/14404972/how-can-you-add-a-link-to-a-google-site-via-a-google-apps-script). I have inserted: 'var thisPage = SitesApp.getActivePage();' between 'var site' and 'var pages'. Question 1: how to i get 'var grid' to print only pages from 'thisPage'? the grid is printing all URLs. What is the proper syntax to have one var filter another var? – Jeremy Kerr May 18 '16 at 17:25
  • @Gerneio, I have updated my original question to include sample code I found in another answer which illustrates how to print links for all URLs on the side. This is close to what I want, so I've modified the sample to add a new var to get the Active page. I'm currently stuck on how to filter 'pages' based on the new "thisPage" var I've created. Any pointers appreciated. – Jeremy Kerr May 18 '16 at 17:47
  • this question is now totally different from the original question and current title. you already know how to get the subpages, thus an answer at this point is unlikely to help future readers. you should close this and open a new question. – Zig Mandel May 18 '16 at 18:48
  • Actually, I just discovered that my modifications worked. By creating the var thisPage to get the ActivePage and then using var pages = thisPage.getAllDecendants i "did" get the list of sub-pages in context of the current page. Fantastic. The problem now is that once I navigate to the sub-page, the script no longer works, since the sub-page list needs to be provided from the parent page, not the sub-page which has now taken place of the Active page. I'm beyond frustrated now. This should be a supported feature in Google Sites. As it stands, I've wasted hours with little results. – Jeremy Kerr May 18 '16 at 18:52
  • For the record though, I have now demonstrated that I'm willing to dig my hands into code, even when I don't know what I'm doing, and I was able to logically sort out the correct way to do it. – Jeremy Kerr May 18 '16 at 18:53
  • @ZigMandel. I agree. I have followed your advice and created [this new question] (http://stackoverflow.com/questions/37308196/how-do-i-use-getalldescendants-to-list-sub-pages-of-the-parent-page-instead-of-t). That question is more specific, and I would appreciate any help to prevent me from walking away from this .. i sense I'm close .. thanks. – Jeremy Kerr May 18 '16 at 19:11
  • @JeremyKerr Glad you got your hands dirty with some code ;) – Gerneio May 18 '16 at 23:49
  • 1
    @gerneio, I just don't want to leave the impression I'm looking for a free ride... I've been trying to figure out a solution for several weeks and Java scripting is a bit out of my comfort zone... I'm willing to learn, but I'm getting to the end if my rope trying to figure out something that should be included out of the box... Too many hoops to jump through to get a simple tab navigation in a Google site – Jeremy Kerr May 19 '16 at 02:47

0 Answers0