Tips + Tricks

Logi Hacks – Apps, Custom not Coded

By Joshua McClure
Share on LinkedIn Tweet about this on Twitter Share on Facebook

There have been many changes in my seven years of web development. When I first started out, Adobe Flash was popular, JavaScript was mostly used for goofy image hover events, and Internet Explorer 7 was the browser of choice. Needless to say, much has changed.

Tools such as Adobe Flash have been completely replaced and made obsolete by HTML5.  Gone are the days of only supporting specific browsers and devices. It would be blasphemy to consider developing an application that doesn’t only works for the majority of screen sizes and browsers. And it seems that every single day new coding styles, databases, and language libraries are entering the market. It’s enough to make your head spin.

All these changes do present a challenge though. Today’s developers must figure out how to create apps that:

  1. Look great and are intuitive to use.
  2. Do not take 100 years to develop.
  3. Actually provide value to your customer, business, or operation.
  4. Can be supported and viewed on all major devices and browsers.

Below I outline a few tools and tricks for creating these apps, as well as our secret weapon for custom apps that only require a few lines of code: the “app in a box” practice.

How do I make my application look great?

There are many open source user interface (UI) libraries available to help assist with this task. Bootstrap UI, Foundation, jQuery UI, Kendo UI, uikit, Semantic, etc. are all excellent for delivering an appealing front-end. Better yet, almost all UI libraries play well with Logi Info. Using a UI library will help cut the front-end styling in half, plus it will help deliver a consistent “look and feel” to your users.

How can I increase the speed of development?

Logi Info is a great starting point for connecting to data of all sorts and building the baseline functionality. It also offers a lot of out-of-the-box tools which we can further modify to meet our precise needs. These modifications are made using CSS, JavaScript, or by even writing a plugin.

One of the most efficient methods of getting your app development on the fast track is to create a reusable framework. This framework will help you to harness all of the layout blocks (header, navigation, sidebar, footer, etc). A well-built framework will enable grow and expand your project in the future and it will also remove the framework inclusion from plain site of content developers.

Keep your application simple

I am of the opinion that if an application is not simple to use, users will not use it. Your data may tell a complex story, but this doesn’t mean the UI has to be complex as well! Give your users a familiar way to view the information they need.

Keeping it simple also means setting up an easy to use application and providing clear navigation that will guide your users through the work flow. Combine this with a consistent layout, and the navigation will help create a single, fluid application. Stay away from navigation that is more than 3 levels deep, if possible. Also don’t use too many flashy animations – this could make things hard to use.

A well-designed application will increase the value to your customers or users. It should make complex stuff easy and intuitive. Don’t leave your users stranded and expect them to know how to find their own way.

Viewing diversity

Nowadays there are an overwhelming number of devices and screen sizes that can be used to view an application. It could be an absolute show stopper if your project is only focused on a single viewing experience.  Consider using responsive design techniques to allow compatibility on all screen sizes. A few of the UI libraries I mentioned earlier are perfect for this task and will also help with cross browser compatibility. Logi Info v12 has a ton of tools that make responsive layouts a no-brainer. Using canvas based charts and responsive rows will go a long way for ensuring a cross browser and responsive viewing experience.

“App-in-box” fundamentals

Taking all of this into consideration, there is a simple way to quickly create great looking, easy to use applications that requires very minimal coding – with “app in a box” fundamentals.

Web development has grown over the past decade to employ code reuse, a practice which has long been a regimen in computer software development. The “app in a box” practice makes it possible to create reusable template and code processes in an application.

The “App in a box” pattern is a way to template a product or functionality that you are providing. By building a template you can save precious time rebuilding basic architecture that will mostly remain the same from project to project.

In our App-in-the-Box webinar we will be explaining how this Logi hack gives you the power to build a custom app with minimal coding and zero development tools required! We’ll dive into how you can use a consistent theme and layout, leveraging all of the basic web standards (CSS, HTML, JavaScript) to build the layout. We’ll also show how you can take future changes and security concerns into consideration, such as:

  1. The need to change the navigation every now and again.
  2. Minimizing the number of reports that we need to touch to make updates easier to make in the future.
  3. Providing slight variations to the layout, content or menu depending on the users credentials.
  4. Keeping report developers from fiddling with the template.

Interested in seeing how it’s done with only a few lines of code? Watch our Logi Hacks on-demand webinar and see how easy it can be to master the maneuvers of this very cool hack.


Originally published September 15, 2015; updated on August 9th, 2017

About the Author

Josh McClure is a software developer at Logi Analytics. He's spent time in various engineering and customer solutions roles at Logi, where he's specialized in UI/UX, custom styling, and tailored solutions.