Low-code 101 #6 – Spotlight on Code Studio

We are delighted to release a new episode of our Low-code 101 webinar series. Mark Grainger, Lead Technical Developer for Liberty Create, to talk about the Code Studio.

Click the video to start watching the webinar. A transcript of Spotlight on Code Studio is available below.

A transcript of the webinar is below:

Laura: Hello and welcome to this Low-code 101 webinar. I’m Laura Ritchie, from the Marketing Team at Netcall and today I am chatting to Mark Grainger, our Lead Technical developer for Liberty Create.

Like most of the rest of the country, we are both currently working from home, so apologies if there is a little ambient family background noise!

Today Mark is going to introduce you to the Liberty Create Code Studio, give you a little walk around and learn all about it. I’m looking forward to picking your brains Mark.

Mark: Happy to help Laura. Hi to the audience.

Laura: So, Mark, let’s start by a basic explanation of the code studio. What is it and who would use it?

Mark: No problem… So whilst Create is primarily a Low-code platform and most things can be achieved with the standard functionality, there are always situations where users want to do something that’s completely bespoke.

Code Studio is an extension environment allowing builders to extend areas of the main platform using Javascript. Anyone with experience with Javascript and familiarity with the main platform would be good to go

Laura: And how would builders get started in Code Studio?

Mark: Well… it will typically depend on the builder’s experience. As mentioned before, a knowledge of Javascript is necessary although it isn’t essential to be proficient. I think the most important thing is knowing exactly what you want to do, as that’s 90% of the problem solved already.

Laura: Yes I agree actually, I’ve done the Liberty Create certification – level 1, and I do think that the hardest element is planning what you are trying to build, it’s harder than actually building it!

OK, can you show us what you can do within the Code Studio then?

Mark: Sure. So this is one of the first ever widgets we built with Code Studio. It’s a very simple kanban board with lists and items within those lists. These items can be dragged around, you can edit your lists, you can edit your items and set various things such as colours and details. It’s just a good example of something that can be created with Code Studio very easily.

If we take a look at our widget within Code Studio, you can see that we’ve got our main area here which is for the code, on the right side we have a list of files that belong to our widget and then you’ve got tabs for things such as references and inside as well on the fingertips you’ve got a little reference guide which gives you on hand access to functions within the Code Studio, which can be a good little guide.

As for the code itself, we have the usual suspects. We have an HTML file which you will see is very small. We have JavaScript, CSS and we’ve also got backend JavaScript, which would typically be used for looking up record data, or things of that nature that you would be using elsewhere in the platform.

The main thing to note, is that none of the code to do something complicated, like the kanban board, is actually extensive. It’s all very simple and very easy to get to grips with.

Laura: OK, that makes sense. How about a code studio processor? What are these and can you give some examples of how they are used.

Mark: Sure… field processors and data processors are typically most useful with importing data, either with CSVs or the API. Field processors would be useful for perhaps tidying up or validating a single column, so perhaps stripping currency symbols or columns before saving it.

Data processors typically work the same but on a whole CSV row or API record. As you have the whole row available, you can do things conditionally based on the whole thing – for example, if you have a ‘quantity’ field and a ‘unit cost’ field, you might want to work out the total cost.

And if there are issues with the ‘unit cost’ field such as leading currency symbols, or separating commas, you could easily handle these prior to making your calculation. Often it’s just about making little changes to either making incoming data go into Create cleaner, or to maybe convert it on its way out if another system we’re sending data to needs it.    

Laura: And what about widgets? Great name – I’ve heard about them within the Liberty Create Code Studio – so could you help me understand what they are for?

Mark: Yes… Currently in Create, we have various built-in widgets that can accomplish most things such as lists, forms and charts, but allowing users to make their own widgets gives them the opportunity to display data in whatever way they choose and with whatever sort of functionality they like. It could be something small and simple like a menu with very specific styling, or something much more involved such as the Kanban board we looked at before

Laura: OK that’s been really useful to get to know some of those features – there are some really powerful tools there to play with. What does the future hold – what are we likely to see for Liberty Create Code Studio in the next releases?

Mark: Code Studio is still very much in its infancy whilst the main platform has been growing for many years now…but the long term aim would be to allow a user to programmatically extend most areas of the platform where it makes sense to.

For example, Widgets & presenters have extended Pagebuilder, data and field processors have extended imports and exports, event actions have extended rules – so it’s just about identifying where it’ll be most helpful. Create will always primarily be a low-code platform though, but it’s impossible to cover everything in a low-code way.

Our development is all demand-driven, really. I have a huge list of things I’d like to do, but what we actually develop is very much based on customer enquiries, feedback and requests plus things that complement other elements of the new release.

Laura: Well I am sure that are some exciting developments in store for the Code Studio… thanks for your time and knowledge in showing us all around Mark. I certainly found it useful to take a deeper dive into this aspect of Liberty Create, so I am sure that our listeners did as well.

Our next “Low-code 101” will put the Test Studio into the spotlight and we’ll focus on all the features within the Liberty Create Test Studio. You’ll find loads more information on the Netcall LinkedIn and Twitter pages. We also have a couple of Podcast series about Liberty Create, that can be found in our Resources. We have a few other webinars which are available from our site about our Community plus show and tells of new apps that have been built specifically to help organisation’s to react quickly to the changing COVID-19 situation.

But that’s everything for today, so thanks to Mark and goodbye.

Mark: Goodbye!

Our next episode of “Low-code 101” will look at Liberty Create Test Studio.

Discover more about Liberty Create and the companies that are benefiting from it.


Request a demo

Download a product sheet