Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Jimi Wikman
    Jimi Wikman

    How to add tabbed blocks in Invision Community Pages

    • Like 1
    • Interresting 1

    Adding content using tabs in Invision Community Pages is one of the most common questions I get about this website. It is something that is really not that complicated, but it is a bit tricky to find the information. In this article I will show you how I created my tabbed blocks so you can use it on your own page.

    While you can add this directly into a template if you want, I prefer to build this using blocks. This way I can control the content in more detail and it makes my life easier since I have different blocks for each content. So I first start with creating a block that will hold the tabs themselves. In this block I will reference in other blocks to display the content for each tabbed content.

    To create a new block you go to Pages -> Page Management -> Blocks. There we create a custom block with manual HTML as the content editor.

    Screenshot 2020-08-23 at 11.56.40.png

    Give the block a name and a template key. I also have organized my templates so that my Tabs are in a separate category, which help making things a little easier to find when you have a lot of blocks like I do.

    Screenshot 2020-08-23 at 11.57.02.png

    In the content section you can now add the HTML and template logic to create the tabs section.  The information on how tabs work can be found in the documentation here: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuitabbar-r66/


    <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false">
    	<a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
        <ul role="tablist">
                <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true">
                    <i class="far fa-newspaper"></i> Management Articles
                <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item">
                    <i class="fas fa-comment-alt"></i> Management Discussions
                <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item">
                    <i class="fas fa-id-card"></i>Management People
                <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item">
                    <i class="fas fa-cloud-download-alt"></i>Management Downloads
                <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item">
                    <i class="fas fa-play-circle"></i>Management Videos
                <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item">
                    <i class="fas fa-link"></i>Management Links
    <section class="ipsTabs_panels ipsTabs_contained">
        <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'>
          <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a>
        <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'>
        <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'>
      <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'>
      <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'>
      <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'>

    In this code we have the top section defining the tabs themselves. Each tab has an ID that we use in the bottom section to determine what content we show in each tab. This is done in the bottom section by adding the ID to the div ID "ipsTabs_elTabBar_HERE_panel". So for example we can add the ID of 1 to show the content for the first tab by adding the number 1 to that ID: "ipsTabs_elTabBar_1_panel".

    What I have done for my setup is to add blocks rather than content directly into the bottom section. For me that make things easier to manage, but you can add it directly to your block if you prefer that. In my code here I am using FontAwesome to create the icons for the tabs. You can just take those out if you prefer not to have icons in your tabs.

    Once this has been done, then you have a block that you can add to any page, just like other blocks. You can see this example live here: https://jimiwikman.se/management/


    I hope this is helpful and if you have any questions on how this works or how to modify it, feel free to add a comment. I will do my best to answer as always. If you have other questions on Invision Community, please use the discussion forum.

    • Like 1
    • Interresting 1

    User Feedback

    Recommended Comments

    There are no comments to display.

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By ©Jimi Wikman
      As I keep forgetting this one I figure it would be good to add it here 🙂
      <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false"> <a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a> <ul role="tablist"> <li> <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true"> <i class="fa fa-list"></i> Tab 1 </a> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fa fa-star"></i> Tab 2 </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fa fa-terminal"></i>Tab 3 </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> Message 1 </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> Message 2 </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> Message 3 </div> </section>  
    • By ©Jimi Wikman
      Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects.

      Creating the Database
      I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else.
      Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add:
      Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself.

      Setting up a Database Relationship
      After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate.

      Adding the database relationship in the template
      As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects.

      Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code:
      {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank:
      {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this:
      <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}}  
      Defining the output in basicRelationship
      Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file.

      This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end.

      With the ID defined we can add a bit of code to make sure we only target specific databases with our changes:
      {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}}  
      Creating Theme Templates instead of just using basicRelationship
      In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook.
      In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly.
      Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages
      If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead.

      Adding data to the theme template
      Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item:
      {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently:
      {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag:
      {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea.
      <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div>  
      This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast.
      Happy coding!
    • By ©Jimi Wikman
      I have looked at Stratagem for quite a while, but always been a bit turned off by the colors. As I plan for JWSE 2.0 I started using GitHub's Project feature, but it felt like I should stay on m own site instead. So I decided to try Stratagem out and I was not disappointed.
      Stratagem is pretty much everything I want from a planning tool, especially since it is tied into all other aspects of this site. Not only is it easy to setup project, but I can also add projects to clubs, which is pretty amazing to be honest.
      The initial setup was super easy, but there were a few things that I did not like that might be a bug. I did some easy styling changes with CSS and was pretty happy the way things looked pretty much right away. There are a few things I think can be improved, but I have added my suggestions to Michael over at Coding Jungle. I assume it will be a while though since he is probably busy making adjustments for Invision Community 4.5 coming soon.
      I am very happy with this purchase and I will put some time and effort into it to see if I can make suggestions on improvements using my knowledge of other planning tools like Jira and Trello.
    • By ©Jimi Wikman
      In the last month I have been working on this site to try to figure out how to build things properly.I have made some adjustments to colors, built a brand new header and finally got the graphics I need to get content flowing.  It has been some ups and some downs, but overall I feel pretty good about the way the site is coming together.
      Maybe the biggest change that happened in January was a shift in mindset. Going from always strive for perfection to good enough with the possibility to improve, really meant a lot.  The other thing that really made a huge difference is getting PhpStorm and starting to code for real. Sitting in a proper IDE and do code, there is no feeling like it and I really, really missed it.
      Getting a ton of graphics also did matter a lot. That is because now I have the graphics needed to build the page heroes so I can start to feel a bit productive again. It also give me a ton of new graphics to use for articles and blog posts and it inspire me quite a bit to be honest. Great artwork always have that effect and not that I have a whole lot of new vectors to play with I have so many options while still being able to keep the site consistent.
      January was also a shitty month when it comes to stress and that affected things quite a bit. A work related issue really frustrated me and cost a ton of energy. My son is also having issues with school and live in general which takes a lot of time and make me worry of course. Fortunately he is an amazing person and I am constantly amazed over how mature he is despite his situation. So I have mixed worry and stress with a sense of pride and amazement, which has not really done wonders for my state of mind in January. Still, it's being handled and I feel a whole less stressed these last few days.
      Using Jira for Backlog management
      In theory this works great, but in reality I have been to lazy to use it properly. In February I will take it a bit more serious and I aim to do one story from the Epic "JWSE Website" every weekend as a minimum. I am also going to start my blog series on how to use Jira for site management, so the workflows will be updated a bit with a proper workflow. My highest priority right now is to add a home navigation for areas that are "generic". This includes things like Policies like Privacy Policy and an About This Site page where you will learn more about this site. These are being created slowly.
      Adding content headers to all sections
      This is what I am currently working on. The problem I am trying to solve is to how I will get this consistent across the site. For pages it's easy. Just drop in a component in the widget area and you are done. For databases I have to split out the templates for each database. That way I can add a component in the front page only and keep the data entries without a component. I may also try to add a section for each category, but that require some additional work with some if queries so it's not really a priority.
      The biggest issue I have right now is the application specific sections. While each application have their index file it is already added to the content wrapper. This makes it impossible to break out to be a full width container. The option will be to add a bunch of targets in the templates or if I can add it to the blocks themselves. I am trying to figure this out, but it should be possible even if it may not be a super clean solution.
      The other issue is that I have the CSS added in a separate file and there is no good way to add that to the applications. I might just lift this into the overall CSS since it's not a whole lot of CSS and I will add it to pretty much all pages anyway. Another option is to include it inside the block itself, but I do not like the idea of inline CSS. We'll see how I figure it out in the end.
      Recreating the projects database
      The projects database is going to be a focus area in February. in January I started the remake by adding content that follow the same format as the CV's we have at Zington. So besides adding the content I will also add new banners for each project using the new standard where the site icon is colored based on the area it is connected to.
      I also started to add some people from the People database so as I recreate the projects I will also list the people I currently have added. The ones not yet added I will see if I can add to the database. Not everyone will be added of course, but a few selected ones would be nice.
      I also want to connect the databases a bit better. Right now I just pull in the author image using the standard Invision Community template for profile. This I want to change a bit so I can link to the page in Awesome People rather than the user profile for the site.
      So January was a bit of trial and error, but things are slowly improving. I just need to focus on building content and not to try to get people in here to interact. It is for me I build this after all and if someone else like it, then great. I will not stress about it however.
      Just have fun and always strive for progress and not perfection.
    • By ©Jimi Wikman
      When you use the database relation field in Pages it will behave a bit weird. So thanks to Opentype over at Invisioncommunity forums this was demystified.
      So, if you in database 1 add a database relation field to database 2, then the output in database 1 will come from the template basicrelationship. If you activate cross reference on that field then the output in database 2 will not use the template basicrelationship for some reason. Instead you will need to add the output format in the template itself.
  • Create New...