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

    How to add database relationsship with design in invision community

    • Love 1

    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.

    Screenshot 2020-07-18 11.51.36.png

    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.

    Screenshot 2020-07-18 12.02.47.png


    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.

    Screenshot 2020-07-18 12.09.12.pngScreenshot 2020-07-18 12.09.03.png


    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.


    Screenshot 2020-07-18 12.18.01.png


    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}

    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}


    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.


    Screenshot 2020-07-18 12.20.55.png


    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.


    Screenshot 2020-07-18 12.27.29.png


    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"}
    <!-- all other databases -->
    <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a>


    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

    Screenshot 2020-07-18 12.38.15.png

    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.


    Screenshot 2020-07-18 13.01.22.png


    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')}

    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:


    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')}
        " />
      <div class="people-profiles_Name">
                {{if $item->customFieldDisplayByKey('people-profiles_Name')}} 
                {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')}
    <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>
      <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>
        <i class="fas fa-id-card"></i>
        {{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>
        <i class="fab fa-linkedin"></i>
        {{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>
        <i class="fab fa-instagram-square"></i>
         {{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>
       <i class="fab fa-twitter-square"></i>
           {{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>
       <i class="fas fa-home"></i>


    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!

    • Love 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
      Going over requirements and making time estimations and technical solutions for the front end part of the project.
    • By ©Jimi Wikman
      In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!
    • By + MikaelX
      I am a very driven developer with a wide spectrum of knowledge and I like to take part in the whole process of the product.

      Great knowledge in NodeJS, Express, GIT, Jade/Pug, Sass/CSS, MySQL, XML, CSS, HTML, jQuery, xAuth, Facebook, Twitter, routing, prototyping just to mention a few

      Specialties: NodeJS, Express, PM2, Routing, Plugins, NPM, Bower, mySQL, XML, HTML, SASS/CSS, JS/ES2016, Gulp, Vagrant etc, please ask me for more details if you're interested
    • By + MilosK
      Miloš is a calm and organized e-commerce developer skilled in Java (especially hybris) and web application development with a strong interest in software engineering, continuous delivery and automation. Miloš is social and quickly adaptive to a new environment or a role. His good analytical and critical thinking helps Miloš to adopt an objective view on a given task. Miloš is focused on details, eager to face new challenges and always strives to help the team with self-improvement and optimization.
    • 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...