Is it possible to extend OutSystems IDE to customize/improve upon UI for developers?
Application Type
Reactive

I am trying to understand the scope of what is possible within Outsystems. There are two specific use cases that I would like to know if they are possible or not [the user in these instances is the developer]. Please find an overview of the individual use cases below:  

Building custom widgets with their own UI for developers to use inside of ServiceStudios 

One of the things I am looking to do is create custom widgets/components for developers to use while building applications. A good example would be the Outsystems UI icon widget. When selecting what icon the developer would like to select for a specific implementation, the developer can choose from a visual display of icons that show up in a pop up window.

Adding/Replacing Screen Template options that display when creating a new screen with my own set of options

I would like to replace/add to the list of screen templates available for developers when creating new screens with customized options. The tutorials on creating template layouts, etc are not applicable to this. I have gone through those documentations, and understand how to create those. I want to specifically have the new screen templates show up within the dialogue that you are shown when creating a new screen, which would improve upon the overall interface for developers. 

it was something I tried the other day for another use case to help to minimize confusion, human error, and maximize efficiency. Honestly, that is probably part of how Outsystems has theirs working, they are just making it so when you click on the icon item it is immediately opening the modal window rather than having to pick that option in the dropdown, which just further makes me think that there has to be a way to make that happen, but haven't made that last leap yet 


Marcio, thank you for your quick response. Please find my replies below:

Screen Templates:
I will have to give this a try and get back to you, but just for clarification purposes, following these steps will allow me to replace/add to the files that you see in the below image, correct? Meaning, as a developer I will be able to go in and when I click create a new layout, my custom layouts will display here, correct?


Create Widgets:

I am familiar with the documentation that you have shared for creating components, and maybe I am missing something in it still, but the issue I have with those components is that the developer can only add parameters using the 'props' panel. I am looking to create a widget that functions similarly to the one displayed in the below screenshot. Meaning, as a developer I can add a custom made component to my layout and when I click on a field so that I can input in the parameters, there is a modal that shows in the center of the screen that lets me assign the parameters for it. In an ideal world, I would like to take this one step further and have the modal show up in the center of the screen when you add a component to your page and it walks you through the properties that you need to input, but I understand that might not be possible. 


In both of these use cases the idea is to take what Outsystems is already doing for example the icon widget displayed above and the predefined screen template modal that is used for creating a new screen, and leveraging them to improve efficiency and the workflow for our developers.

Thank you for your assistance.

Arielle Cerini

Screen Templates.

Yes, when you do all those steps in the end you will be able to see

the screen templates in that first image you show me. It will be the screens and each screen

has a layout. you can use the same layout for the different screens or use a layout for each screen, you do what you got to do, remember that :)

Create widgets

I already in the past I want what you want now but I never found 

a solution for that, it is a case to ask OutSystems how to do that

and if it is possible to do that.

I will try to know and get back to give you an answer for that!

Kind regards,

Márcio

I got the screen templates to work. Thank you! 

Yes, very good. Now, what do you want to do with the widgets?

For example, the icons what you are talking about. What I do when I am working with icons is import by excel, I convert to static I do the upload and then I turn the className for the icon as the identifier and remove the id generated automatically and then voilá you can see the icons on that modal.

Let me know if that can give you more ideas.

Kind regards,

Márcio

The idea is I am trying to improve the UI for developers. This way when people at our company are going in to implement one of the UI design's they are able to easily select the font-awesome icon we want them to use that is also duo-toned and then it will show up in the design. Yes we can do it with classes, which is how it currently functions, but that still requires additional steps on the developer. Having a visual menu to select the font-awesome duo-tone icon from would be much more efficient and minimize the potential for human errors. The icons is one potential use case for this functionality, another would be to move the prop items into a modal window as well, this way the developer can go in and follow the steps to fill out the component parameters using a form like interface. 

That's the dream anyway....

I think that is not possible, I think the best solution for you is to contact OutSystems and get a proper solution. We helped you in the best way. Do you know?

I am still waiting to know about those modals.

Kind regards,

Márcio

Hi Arielle,

for the parameters being presented as modal with available options, you could get something slightly similar, although not as visual, by making the parameters as an identifier of a static entity with all the available options.  Of course this doesn't allow for free non-predefined values, but for the icon, that's also not possible i guess.

For example, i have defined 2 static entities with the beatles and the stones

My webblock is taking as parameter identifiers of these 2, and this allows for the developer to pick a value from available options displayed as suggestion for the property in the dropdown

Or if there are many options to choose from, choosing 'Select <entityname>...' or double clicking on the property name will bring up a popup


Not really what you are looking for, but maybe a good tool for your toolbox anyway...

Dorine

Ah okay, that definitely helps some. Another thing that I don't know if you have discovered or not, but you can replace the icons for all of the items in that list, so if I combine both things I get a little bit closer. Not 100% what I would like, but closer nonetheless. 

Thank you for your help! 

Arielle Cerini 


Ah yes,

give each static entity record its own icon, I didn't even think that far, good idea !

it was something I tried the other day for another use case to help to minimize confusion, human error, and maximize efficiency. Honestly, that is probably part of how Outsystems has theirs working, they are just making it so when you click on the icon item it is immediately opening the modal window rather than having to pick that option in the dropdown, which just further makes me think that there has to be a way to make that happen, but haven't made that last leap yet 



Yes,

i agree that the icon is special, not an ordinary widget, and service studio is just doing some special stuff with it compared to all the other UI widgets, for example the other widgets, you can see in the application tree, and you can open in the a copy of the OutsystemsUI module to see how they work, not with the icon.

Hey, I was just thinking about another option, but only in the specific case where you want to guide your developers towards choosing only a very few desired options from the many icons available, have a separate webblock for each allowed icon in your theme module, and then add that as dependency to your UI modules -> the specific icon can be chosen directly from the toolbox.

Dorine

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.