Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Blog Articles

    CodeLobster IDE - free PHP, HTML, CSS, JavaScript / TypeScript editor

    In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.
     CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.
     If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files.
     The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors.

    CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key.
     The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.
     Other useful functions and features of the IDE:
    A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale.  Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.  The professional version of CodeLobster IDE provides the programmer with even more features.
    For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.
    In addition the professional version includes an extensive set of plug-ins:
    Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap.  
    We can download and install any framework directly from the program without being distracted from the main tasks.
     In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects.
    You can download CodeLobster IDE from the original website:

    Global Internet Outage affects games and services all around the world

    A global Internet Outage that is affecting thousands of services is currently in effect. It seems that the origin is Level3 / Centurylink which affects not just games, but also internet traffic and even phone services. It is safe to say that people are not happy at the moment.
    It seems that this started just before lunch swedish time and reports of network issues started flood in right after that. Popular games suddenly had server issues and the list of affected services on Downdetector grew fast. Centurylink seem to have some serious issues right now as they seem to have somehow manage to break IPv4 and IPv6 making traffic loop without finding their intended destination.

    Besides breaking a large portion of services it also seem that their ISP part is also down, causing a lot of people loose their Internet connection. This also affect IP based phone services of course, which could be a big problem.
    Based on reports from different sources, such as the Cloud Helix status page it seems that CenturyLink have identified multiple Border Gateway Protocol (BGP) issues causing service impacts across multiple markets. This would explain the IPv4 and IPv6 issues and it is not a total surprise that the now 26 year old protocol would be the cause.
    We are still waiting fo the official word from CenturyLink that has remained dead silent about the situation. That is never a good sign, even if it is a sunday and the world in general is a bit crazy.
    We hope for a quick resolution and hope everyone affected remain safe and calm.

    How to add tabbed blocks in Invision Community Pages

    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.

    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.

    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"> <li> <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> </li> <li> <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item"> <i class="fas fa-comment-alt"></i> Management Discussions </a> </li> <li> <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item"> <i class="fas fa-id-card"></i>Management People </a> </li> <li> <a href="" role="tab" id="4" class="ipsType_center ipsTabs_item"> <i class="fas fa-cloud-download-alt"></i>Management Downloads </a> </li> <li> <a href="" role="tab" id="5" class="ipsType_center ipsTabs_item"> <i class="fas fa-play-circle"></i>Management Videos </a> </li> <li> <a href="" role="tab" id="6" class="ipsType_center ipsTabs_item"> <i class="fas fa-link"></i>Management Links </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'> {block="latest_management_articles"} <a href="https://jimiwikman.se/blog-articles/blog/professional/management/">Read All Articles</a> </div> <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'> {block="management_forum_topics"} </div> <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'> {block="awesome_management"} </div> <div id="ipsTabs_elTabBar_4_panel" class='ipsTabs_panel'> {block="latest_management_downloads"} </div> <div id="ipsTabs_elTabBar_5_panel" class='ipsTabs_panel'> {block="latest_management_videos"} </div> <div id="ipsTabs_elTabBar_6_panel" class='ipsTabs_panel'> {block="latest_management_links"} </div> </section> 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.

    Atlassian acquire Mindville - asset and configuration management from Sweden

    Atlassian and Mindville announced on thursday that Atlassian has acquired Mindville.  This means that Atlassian acquire Mindville's asset and configuration management product Insight, which strengthen their psoition against competitors like ServiceNow.
    The CEO of Mindville Tommy Nordahl is well known to us in Stockholm who have participated in the Atlassian Usergroup events that I ran for two years. For many he is Riada, the company he started many years ago as the Atlassian company number one in Stockholm (and sweden?). Lately he has focused more on the asset and configuration managament product Insight and I am not surprised that Atlassian now have aquired it.
    Atlassian and ServiceNow are both gearing up for a battle. Since ServiceNow are strong in the asset and configuration management it makes sense that Atlassian want to stregthen their portfolio in their area.  With more than 1700 customers already and Atlassian now adding resources I think we will see the cloud adaptation speed up a lot.
    If you have not looked at Insight before, then I suggest you do. Not only is it looking great and is easy to work with, it is also powerful and a very useful addition to your support organization. Using Insight alongside Jira Service Desk and Confluence is probably the most powerful way to manage incidents in your organization. The fact that you can directly connect it to your development and opertions team who already work in Jira make it even more powerful.
    I just want to say congratulation to Tommy and his amazing team for this accomplishment. To Atlassian I can only say good job on this acquisition. It will take you another step closer to being the natural choice for mid sized and large organizations, just as you already are the natural choice for small companies and all development teams today.

    Vulnerabilities in SAP Products Could compromise systems and it's data

    Multiple vulnerabilities have been reported in SAP products where things like cross-site scripting (xss) and server side request forgery open up access points through which a hacker can compromise the systems and it's data. These vulnerabilities have been patched in SAP Security Patch Day – July 2020 and it is strongly advised to make that update as soon as possible.
    Multiple Vulnerabilities in SAP NetWeaver AS JAVA (LM Configuration Wizard) (CVE-2020-6286). Security updates for the browser control Google Chromium delivered with SAP Business Client Information Disclosure in SAP NetWeaver (XMLToolkit for Java) (CVE-2020-6285). Multiple vulnerabilities in SAP Disclosure Management (CVE-2020-6267). Cross-Site Scripting (XSS) vulnerability in SAP Business Objects Business Intelligence Platform(BI Launch pad) (CVE-2020-6281). Cross-Site Scripting (XSS) vulnerability in SAP Business Objects Business Intelligence Platform(Bipodata) (CVE-2020-6276). Server-Side Request Forgery in SAP NetWeaver AS JAVA (IIOP service) (CVE-2020-6282). Cross-Site Scripting (XSS) vulnerability in SAP Business Objects Business Intelligence Platform (BI Launchpad and CMC) (CVE-2020-6278). Cross-Site Scripting (XSS) vulnerability in SAP BusinessObjects Business Intelligence Platform (Web Intelligence HTML interface) (CVE-2020-6222). Information Disclosure in SAP NetWeaver (ABAP Server) and ABAP Platform (CVE-2020-6280).

    Critical Wordpress plugin bug compromise hosting accounts for thousands of users

    A critical bug in the popular Wordpress plugin wpDiscuz allow users to upload and execute code remotely. This is because of a bug in the file mime type detection that allowed any file type to be uploaded. This open up the server to remote code execution (RCE) that could result in the entire server being compromised. 
    The vulnerability was reported to wpDiscuz's developers by Wordfence's Threat Intelligence team on June 19 and was fully patched with the release of version 7.0.5 on July 23. Since then 25.000 users have downloaded this update, leaving at least 45.000 sites still vulnerable from this bug.
    According to Wordfence threat analyst Chloe Chamberland, the security flaw is rated as critical severity with a CVSS base score of 10/10.
    Disclosure Timeline
    June 18, 2020 – Initial discovery of vulnerability. We verify the Wordfence firewall provides protection against exploit attempts and we make our initial contact attempt with the plugin’s team.
    June 19, 2020 – Plugin team confirms inbox for handling disclosure. We send full disclosure details.
    June 20, 2020 – The plugin’s team let us know that a patch will be released in version 7.0.4.
    July 6, 2020 – Follow-up as no patch has been released.
    July 10, 2020 – They respond to let us know a patch is coming in 1-2 days.
    July 13, 2020 – Follow-up as no patch has been released.
    July 15, 2020 – They respond saying a patch will be released by the end of week.
    July 20, 2020 – A patch has been released. We check the patch and see that vulnerability is still exploitable and inform them.
    July 23, 2020 – A sufficient patch has been released in version 7.0.5
    If you are using wpDiscuz you should upgrade emediately to avoid having your server compromised.

    Working on multiple projects - the mental cost you pay and how to avoid it

    Working on multiple projects at the same time is sadly a common experience for many of us working in IT. Many split their attention on at least 2 projects or responsibility areas. This comes at a cost however, not just for the person splitting their time, but also for the people they work with.
    Few lift an eyebrow at the mention that someone is in a project for as low as 20% these days. Sadly no one really bat an eyelash when a coworker break down mentally and get sick from the mental stress either. In my line of work as an IT consultant I often see people splitting their time and I see what it cost those persons as well as the projects they are doing their best to contribute to.
    Not to long ago I witnessed a co-worker taking a seat after lunch looking pale. A faded smile and assurance that he would join soon and just needed a moment to himself was followed by an ambulance taking him to the hospital. It took him a year to come back to work. More than once have I seen people pass out in a meeting and outbursts of anger and frustration for small things happen on a regular basis by even the most gentle and kind persons.
    What could possibly cause such extreme amounts of stress? The answer is that all of these people have suffered from extreme forms of content switching. As a human we need time to focus in order to make rational decisions. As the time to focus is interrupted we experience content switching. That is that moment when you are forced to go from one focused thought to another. This change of focus comes at a cost of mental energy and eveyone need a different amount of time to make the switch mentally.
    As a manager you do this a lot as part of your work. That mental flexibility and speed that you have as a manager serve you well to manage most situations. That is because the content switching is still within one context. When you need to split your attention on multiple context however the cost will increase exponentially and with time, you will build up negative stress. If you do not reduce that stress it will eventually cause physical harm and you will hit that famous wall head first.
    Other fields in IT have the same situation, but there is one group that suffer from this more than any other group: the developers. Developers unlike most other groups are focused oriented, mening that they spend more time in their own minds setting up structures and logical flows that create the code they write. Once interrupted it takes far longer to get back to their focused state of mind. Fortunately developers are less likely to work on multiple projects at the same time, but when they do the damage is more severe than for other groups. Designers have a similar situation, but have an easier time to make the mental switch.
    How to mitigate and avoid getting burned out
    Speed is everything, or so they make you think. Meeting after meeting where you jump from onte topic to the next in frantic speed. As you solve issue after issue with your quick and skilled mind you will experience a sense of accomplishment. This is because your brain reward you for it and it becomes an addiction. Soon you will crave it and like a junkie you will crave your fix even when you are off work. Eventually the rewards will not measure up with the cost and you will get frustrated and eventually have problem being happy. A sense of feeling empty and caught in a endless loop is your last warning before you bend the knee to the mental exhaustion and collapse.
    The price you pay fror strecthing yourself thin benefit no one as you break down. There are things you can do however to prevent this. Both as regular practices, but also as strategies and rules you set for yourself.
    Managers, Requirements & Business people
    Make time for focused work - As a manager or if you work in the Business area the biggest danger is having long periods without proper focus. Meetings and workshops take up much of your time, so make sure you dedicate at least 1 hour every day for focused work (no, not during lunch...). This is a time where you take time to be fully alone without distractions to focus on emails, power points and whatever else you have promised to do. This will naturally lower your stress levels and allow you a form of soft reboot. If this does not work, then dedicate a longer period 1-2 days a week. This can be that you work from home one day once a week or two half days for example.
      Turn off at the end of the day - The most common mistake managers do is that they never stop working. My suggestion is that you leave the computer at work if you can, or leave it in the bag when you get home. The same goes for the phone. make sure it is turned off as soon as you leave work, or at least as soon as you get home. If you are required to be reached every hour of they day, then you are constantly on stand by and never relaxed. Not only is this bad for your health, it is actually a legal issue as well in many countries as you are working over time. Stop doing that today!
      Say no or delegate - If you get asked to split your attention between multiple areas or you feel that thet area you are in charge of is becoming difficult to manage within your normal working hours, then you should say no or delegate.  Saying no is always difficult since most managers are driven by status or to help others. It s however a very useful skill to master and it will save you a lot of stress. Just make sure you say no for the right reason and not to avoid stepping out of your comfort zone, because that is actually a good thing.

    This is very hard in some cultures and if you feel that this is impossible, then find a way within the situation you find yourself. A trick that you can try is to promote people that work for you or offer to teach someone what you do. Just make sure you make sure the person you delegate to also have their regular workload reduced or you will burn them out instead.
      Never try to lead someone that is not fully commited - Having people in your team that split their time is a cause for much frustration. No matter how much time they dedicate to your project you will never get that time because of the cost of content switching. You will also find the moments when they are not working on your project, no matter how rare they are, to be annoying and inconvenient. My advice is to never try to lead anyone who is not fully commited to your project because of this.  
    Developers & Designers
    Never split your work - There are times when you might be asked to split your work and my advice to you is to say no. No matter what split you have you will never be able to dedicate 100% time between the two. Each split will cost you a lot of time just for switching between them and the mental toll will be far worse then you think. If you split yourself 50/50 you will do 40% in each project and you will work 120%. You will constantly feel stressed and that you do not do the work you are supposed to. It will eventually break you down mentally so never accept a split work situation.
      Avoid meetings if you can - Some meetings you need to attend, but try to avoid meetings that are not necessary. The reason is that a meeting, even if it is just 30 minutes long, will completely content switch you from your work. Unlike a short interruption that cost around 10-15 minutes of lost time a meeting will cost at least double that. Some meetings may be even more disruptive causing fragmentaion of thought for hours afterwards as you try to focus on work, but have the new information or task in mind as well.
      Take time to clarify things - The biggest issue for most developers and designers is unclear requirements and unclear expectations. If you take time to clarify things, then you will save a lot of time. That is because not only will you wate time trying to find answers, you also suffer from content switching. This can make a simple question cost hours of focused work. Everyone have different need when it comes to clarity so do not rush sprint startups, requirement sessions or technical architect forums. Make sure everyone in the team understand what to do and why. This way you can focus on working without having to find answers or explain things to other members of your team.
      Agree on work environments - All teams have different compositions. Some need a lot fo focus, others less. Make sure you define wht your team needs and agree on how you will work. I have had teams that work with the hand so they just put up the hand to let you know they are busy. This way you can signal that the person have to come back later as you are deep into something right now. If that is still to disruptive then use a hat or something that indicate this before you even approach teh developer. In some cases it can be a good idea to assign a team lead or project manager to handle all outside requests to further reduce disruptions. Whatever your team need, make sure it is defined and agreed upon by everyone.  
    Insert yourself into the information flow - As testers it is sometimes difficult to know what is going on. This is because testers can be seen as an external part of the development flow. This usually means test comes in long after requirements and development planning, which is not only stupid from a quality perspective, it is also cause for frustration and stress. As testers you should sign off on all requirements and you need to be on top of development and deploys. So if you are not included in the information flows you need to be in, then make sure that you are. This way you do not need to run around looking for information or work within an isolated workflow. If you do not, then you will constantly feel stressed and frustrated.
      Agree on bug flow with developers - As testers you should not sit and verify browser compability or standard flows. These should already be well tested by the developers. If this is not the case then you will feel that you are just writing bugs all days and no development ever get past test. This is a bad situation and you should make sure there is a proper definition of done that prevent this.

    When you find a bug you often want to discuss this with a developer. Doing so is disruptive however and I suggest that you set aside two slots every day where you can go over the defects with the team when it does the least damage. This can be done directly after the daily standup and directly after lunch as that is also when many teams collaborate on code reviews and so on. Just agree with the developers when and how you will go over the defects to ensure the impact is as small as possible.  
    These are just a few small tips on how to reduce stress and what the cost is for stretching yourself thin by splitting your attention between multiple projects. Most of these may be most relevant to a certain group, but most of them are valid for all groups. Content switching and bad work processes cost billions every day and they cause health issues that should not be underestimated.
    Stress related illness is increasing and in many fields you can name at least one or two persons that you work with that have suffered from being burned out. In Japan there is even a specific word for working yourself to death: Karoshi. So be wary of the many ways that you can harm yourself unintentionally. One good start to protect yourself is to never accept working on multiple projects at the same time.
    If you have more tips, please share to help others avoid getting burned out.

    JWSE Year 2 - moving forward yet another year

    Today is my birthday. It is also the first birthday of this website after I converted it to use Invision Community. This last year have been filled with ups and downs, not just in life but the entire world seem to be having trouble finding it's footings. As I move into year two of the latest incarnation of this website it is time to find that footing again, at least for this website.
    When I started the conversion last year it was just another experiment. A way to try out the good old Invision Community again. Something I have done on and off since 2002 or so, but never really stuck with. What I found was that Invision Community was working very well for me now. The many years had matured Invsion Community as a product and as I got deeper into the template system it really appealed to me as it allowed me a creative freedom that not even Wordpress can match.
    In this last year I have created hundreds of blogposts, hundreds of videos have been added and I have recreated my entire swedish blog again. I have built several databases such as the Awesome People section and My Projects section. I have also had a few setbacks such as loosing all graphics for some strange mishap at my hosting company and also had my account ravaged by virus due to the presence of my old Wordpress site. This has since been corrected and I am now on a new webhost and I have setup an AWS hosting for images (which also cost me dearly due to a script malfunction, but that has since been corrected).
    Over all it has been a good year, filled with exploration and learning. My passion for front end development have been reignited and my passion for design has also returned. The writing comes and goes, but overall I feel good about it and i feel that it is far easier to write using Invision Community than it is to use Wordpress. It suits me better I think.
    Moving forward
    Last year I wrote some goals for this website in the form of short term, medium term and long term goals. These goals are still valid and while I have created the databases and I have a design that works for at the moment, I will rebuild this design again as part of the 4.5 upgrade.
    Short Term Goals
    My short term goals is to upgrade the site to version 4.5. With that comes some new features, but the main goal is to reset the structure and design  bit. I have played around and experimented a bit in the last year and it is time to clean that up now. So the first short term goal I have is to build a new design, recreating the current design for the 4.5 version. This includes building some new templates that I need for certain databases, but also organize the databases properly.
    One of those templates I want to build is to recreate the block design I currently use for this blog. It is based from a purchased application and as much as I like it, I do not need the functionality. I also want to build a design I can understand fully and can control rather than relying on someone elses design. I also want to experiment a bit and use css grid, flexbox and maybe even currentColor, which will be superfun I think.
    The second template is a listing template that I will use for things like My Education and if I decide to add a reference feature, like the CSS reference on w3schools. It will be a very simple template, but very useful for different types of listings.
    Another short term goal I am working on right now is to update all the projects in My Projects and rebuild My Gallery section.
    Medium Term Goals
    The medium term goals will be to create the information for guest blogging and about this site.  About this site is not just for the visitors as I also need to define what this site is for myself. I also need to figure out who I build the site for so I know what to create for them. For this purpose I am starting to create sort of a personas gallery for myself, which is actually already helping me focusing the content a bit.
    Guest blogging is probably not going to take off that much in year 2, but I still want to make sure it is easy to understand how to do it. Having a page and instructions on what it means to guest blog is just a first step however. I still need to build a few things to make it valuable for the guest bloggers so I can repay them for their contributions. I have create a new user group just for authors and I am considering to build a new database for them as well.
    With the My Projects on it's feet I will take another look at My Roles. I realize that it is quite easy to build a CV - like structure by connecting to the My Projects database. So I will build a new template for this later this fall and combine that with acual CV's as time permit.
    Long Term Goals
    The long term goals for year 2 will be to create more content that is helpful. What I mean by that is that much of what I write here is mostly for me. It is news that I think is interesting and my own thoughts mostly. While that is good and fine, I also want to make sure that I add content that can help and inspire. Things like short tutorials, downloadable graphics and inspiring posts on new tools or practices is probably more useful for a visitor, so I will focus a bit extra on that in year 2. It takes a bit more time and energy, but I think it will be worth it.
    I get a lot of questions on how I built this site, so I am going to write more about that. I know how hard it can be to get started with Invision Community as the information is a bit scattered, so if I can help people get started, then that would be great.
    Overall the long time goal is still to provide useful information and resources to make people want to come here. The long time goal is also to use this site as a way to keep my toes wet in the front end development area and the design area primarely.
    These long term goals always balance against me having fun. This site can never be a source of stress, that would defeat it's puprpose. Slow and steady progress over perfection as time permit is key. As is doing this with love, not obligation because this is a website created to satisfy my need to write and create. Nothing more. Nothing less.
    Onwards to year 2 with new adventures and discoveries!

    How to add database relationsship with design in invision community

    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!
  • Create New...