Every day I ask myself where is time being wasted in this Low-Code world that is supposed to make life so quick and easy? In the last few days the biggest time waster, again due to my learning curve, was in specifying some simple .CSS. Of course if I was a “Citizen developer” who, one would assume, has scant knowledge of .CSS, Low-code would not help me solve some of these issues. But even as an ex-developer, if you are rusty it takes time to fix simple stuff.
However in the right hands this outssytems.com low-code development environment is pure power and very impressive.
Below is what the Menu screens are looking like currently, but will definitely change as the design and time moves on.
Selecting Tracks and Levels
Most of the time and effort has been going into the reasonably complex queries that have to be created to establish a selection from a list of preset learning Tracks and Levels (per Student) taking from a list of all Courses that a the Student will end up actually studying called the Student Courses. The goal is that the Student will select 5 courses they prefer from a set of 10 or more per Track and per Level. This needs to be programmed for both the Web App and the Mobile App. In the Student App it is only for that specific Student, but in the Web App it could be for anybody based on a Manager manipulating it for all Student. This has been where most of the time has been spent in the last few working days. Mainly on the Web App, in order to populate the data for the Mobile App to consume and configure.
Added in Level image icons
It is really important from a UX point of view in a Mobile App that Development uses images wherever possible. In the end I decided to add in a Level number Icon image per level while makes the Mobile app easier to navigate but also the web App. This involved quite a few Web App changes and a few Mobile App changes. Here are some of the web App Changes that were made:
.CSS issues & Forum help
Another place that took too much time, relative to the overall impact on the system effectiveness, was some Cascading Style Sheet (CSS) definition to stop a Course URL from not wrapping within its block, overwriting an action button on the screen. All this needed was some CSS to overwrite the default behaviour. This was the symptom of text going outside of its bounds. And what I wanted was on the left, but what I was getting is on the right:
The great thing about the OutSystems.com Forum where someone (often many people) help you with any issue you happen to be having within minutes or hours of you posting your query. All I had to do was to add some simple CSS class content and I was on my way. If it wasn’t for a simple “dot” I would have had it working hours earlier! This is what it finally looked like and what I was aiming for ultimately:
Dashboard Chart views
As per my previous post, I had changed the layout and the skin of the Dashboards and wanted to show the new look of the donut charts, which are now working. If you click on any of the charts on the Charts Dashboard, it gives you a detailed screen of that particular statistic.
Please note that some of the data you’ll see in the screens below that I am working with is “known” garbage as I make development errors and fix them, but don;t bother removing duplicates, etc. Every now and again I completely delete the test database and start with fresh data. Its getting due for a new refresh!
Mobile screens for Student Course selections
A lot of work was done in the last two days getting the Student to select their specific 5 courses from a list of many Courses within multiple Tracks of learning courses, each with 15 levels. So the have to select which [1.] Tracks they want to do, then, [2.] See the the 15 levels and select to show all available courses. Then [3.] the Student selects the Courses for that level from all Courses to pick their selected 5 courses out of many.
The idea is that as they select it scrolls screens to the right (almost like a screen swipe right), and as they back-up it moves to the Screens left (like screen swipe left). Later I will implement swipe left or right, or drag and drop for course selection. Details shown below:
Progress, albeit it a little slower than I’d have liked, it happening at a pretty reasonable pace compared to writing this in raw code. I was probably a little unrealistic in my initial expectations but not too far out. There is still so much to do for the MVP, but that said there has been a lot of learning and some refactoring to make things smoother and more efficient. The more that gets done and the more I learn, the more I re-visit older screens and make improvements such as “processing” animations screens, “Items not found” messages, “network DB read errors”, etc. so it is hardening as we go daily. Looking good, but a long way to go.
Still it’s keeping me from going insane from sheer boredom, during this total lock-down! Its also giving me a sense of achievement and in the long run the ability to give back, which is getting more and more necessary. Please join me in making this a success. Be that donating, getting involved, connecting me with the correct people/network or if nothing else moral support! Thanks for reading this.