As an engineer blog, I would like to introduce the learning content that I am working on on a daily basis. This is the second unit with the theme of low-code development.
This time’s theme: “Using JavaScript in Outsystems”
In our second unit, we regularly use Outsystems for low-code development. Outsystems provides tools that allow you to develop intuitively by dragging and dropping parts without having to code as much as possible.
However, if you want to implement details such as the UI part as you want, there may be cases where the properties provided by Outsystems are not enough. In such a case, you may be able to implement your ideal by using JavaScript. This time I will introduce one such example.
今回やりたいこと
This time, I would like to change the UI of DataGrid in Outsystems using JavaScript. Specifically, we will introduce the following contents. ・Cancel the DataGrid’s default setting of coloring every other row. ・Color a specific column of DataGrid with your favorite color
How to use DataGrid How to use the OutSystems Data Grid
DataGridのデフォルト色付け設定を解除する
First, we will change the coloring of every other row of the grid, which is set by DataGrid by default.
Normally, if no settings are made, every other row of the grid will be colored automatically, as shown below. We will change this using JavaScript.
It’s hard to see because the color is so light, but you can see that the 2nd and 4th lines are colored gray.
First, prepare a ClientAction (DataGridOnInitialize) for displaying the DataGrid in the screen element where the grid is located, and add an Input parameter called GridWidgetId.
Next, in the Event item of the DataGrid property to which you want to apply JavaScript, set the ClientAction you created earlier to Handler. At this time, also set the GridWidgetId added with the Input parameter.
Set the following JavaScript in the ClientAction you created last. (When defining a variable in JavaScript, the Input parameter GridWidgetId is specified.)
//Get the Grid information created on the screen var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider; //Abolish coloring for each row grid.alternatingRowStep = 0;
I was able to cancel the setting where every other line was colored gray.
Color only specified columns of DataGrid
Next, we will use JavaScript to color only specific columns of the grid. I would like to color only the Name and Age columns in the grid above in gray to make it easier to visually understand that they are non-editable columns.
This time, we will implement it by first coloring the entire grid gray, and then making only the editable Email column white.
First, write the following CSS in the Style Sheet of the screen.
.wj-cell{ background: lightgray; }
.rowcolor{ background-color: white; }
Next, add the following code to the JavaScript in ClientAction to complete the process.
//Set format for the acquired Grid grid.itemFormatter = function(panel,r,c,cell){ //Color the Email column (3rd column) with white if(c === 2 ){ //Add class definition to cell wijmo.addClass(cell,’rowcolor’); } };
You can now color only the specified columns!
Summary
As you can see, OutSystems provides a variety of properties, but I found that you can implement them the way you want by using JavaScript. It felt like I was able to reach out to a specific area of concern, and I felt that the scope of development was expanding.
Why not consider using JavaScript if you cannot achieve the desired results using Outsystems properties alone?
In the second unit, we will continue to develop blogs for engineers using low-code tools such as OutSystems, so please look forward to it.
Hello everyone. This is “Pyu🐤” from the Business Management Department! This time, I would like to introduce myself, what led me to join Dandelions, and my impressions after joining the company.
Self-Introduction
I’m French and have been living in Japan for two years now. My university major is Japanese language and culture, and I have been interested in Japan for several years. My hobbies are watching anime and drawing manga-like pictures. I also like to travel around Japan and I have been to various places. Of all the places I have traveled to, my favorite is Mt. Fuji, the most famous mountain in Japan. Below is a picture I took last year near Mt. Fuji.
A wonderful view of Mt. Fuji🗻
Reason for joining the company
Last year, I started job hunting in Japan and I joined Dandelions in September 2023. The reason I joined the company was because I felt a good atmosphere at Dandelions. During the interview, I was asked about my hobbies. It was a very good interaction and there was no stress. Also, there are people from various countries working at this company, which I thought was a very positive factor. For foreigners, working in Japan at a company made up of only Japanese people can be scary. For that reason, I felt a little relieved because people of different nationalities were working at a Japanese company.
Impressions after joining the company
The atmosphere is good, and most of my co-workers are in their 20s. My seniors listen to me and help me if I have any trouble. I was also able to learn new skills through various fields such as marketing, translation, and web design. Additionally, I was able to deepen my knowledge of important IT topics, which I believe will be advantageous in any future job.
That’s all for now. Look forward to the next employee introduction!
We went on a company trip on October 27-28, 2023. In 2023, the event was held in two sessions for each section. Members at Dandelions could participate in both if they payed the participation fee, and it turned out to be a fun trip with almost everyone participating this time.
The destination was Noma’s “Wood Design Park Noma”.
When you arrive and enter your room, a stylish room with an ocean view. Everyone was so excited and was taking lots of photos.
We played in the sea and took pictures until dinner. Although it was October, the temperature was warm and the sea water was just right. I was planning to just lightly wet my feet, but some people were completely absorbed in it. Some people said “I might be doing the most summery thing this year!” and I had a great time.
The long-awaited dinner!
In the mountain part, there was a lot of meat, but this time we were in the sea part, so there was a variety of seafood. We enjoyed delicious meat, seafood, and alcohol. But on the way there was heavy rain and thunder. Everyone hurriedly evacuated the food and had a hurried dinner. But it’s also a good memory.
After returning to our room, we held a surprise! On this trip, there were members whose birthdays were on the same day and we all celebrated.
Such an happy expression on his face!
At night, we talked and played games together in our rooms. There was also a place where you could make a bonfire outside, so we were able to have some fun together.
This year’s company trip was held with the theme of “glamping”. I enjoyed both the mountains and the sea.
Where will the company trip take place in 2024? I’m looking forward to it!
Hello everyone, this is Ien from Unit 1. For this engineer’s blog, I will introduce what I learn on a daily basis.
This time, I’m using Outsystems to create an API.
Overview of Outsystems and APIs
What is Outsystems? What is API? I think there are people who will ask those questions.
OutSystems provides high-performance, low-code and cloud-native development platforms for forward-thinking enterprises globally.
API is an abbreviation for “Application Programming Interface”. Simply put, it refers to an interface that connects software, programs, and web services.
RestAPI is provided as an extension service of Outsystems. RestAPI is a type of program calling convention (API) for externally using a web system. Use RestAPI to expose methods that allow another system to retrieve or manipulate information.
How to create an API
I would like to introduce what I have created to help you learn more about Outsystems and the API.
To turn your company’s attendance system into a smartphone app using Outsystems, you will need an API that can be called from the app. So I created an API using the RestAPI service provided by Outsystems. The APIs called by the app are attendance information registration and annual leave registration.
In this article, we will introduce how to create a RestAPI service and RestAPI method in Outsystems.
・First, create a blank app.
① Start Outsystems and click “New Application”.
② Select “From scratch” and click “Next”.
③ Select “Reactive Web App” and click “Next”.
④Write the app name and Description and select “Create App”.
⑤ You have created the app.
⑥Click “Create Model” to open development tools etc. I became the catcher below.
・Next, follow the steps below to create a RestAPI service.
① Open the Integrations folder on the [Logic] tab.
② Right-click [REST] and select [Expose REST API…].
③ Set the name of RestAPI.
・Next, create a RestAPI method.
① Right-click the created RestAPI service and select [Add REST API Method].
② Set the name of the RestAPI method.
Example: GETRegisterUser
Double-click the creation method to display the API logic description.
This is the logic of the GETRegisterUser method.Annual leave and attendance information will be displayed, and by pressing the annual leave, attendance, and attendance buttons, you can register the input information in the DB.
My inpressions
Since I had never touched the API in the past, I started from 0 this time. There were a lot of things I wasn’t sure about, but by looking up information on the internet and solving them one by one without panicking, I was able to complete the process. Thanks to this attendance system coordination assignment, I was able to learn about the field of API and accumulate new knowledge and skills, which was a great learning experience for me.
Next time, I would like to explain the contents of the method I created. looking forward to!
The theme of this in-house study session is “Low-code development experience using Outsystems.” I am “TT” from Unit 2.
Outsystems has been featured frequently on engineer blogs, but we held a study session for those with no experience to try it out and deepen their understanding. Additionally, this time we had members who had experience developing with Outsystems participating, and we could see their high level of interest.
The flow of this study session is as follows.
① Basic learning by watching videos
② Obtain a development account
③ High-speed development experience using scaffolding function
①Basic learning by watching videos
First, to look back on what I’ve learned so far, I watched learning videos provided by Outsystems official website. The learning videos above are part of a training course, and review questions are provided at the end of each section to help you check your understanding.
A look at the study session. They were listening to the learning video with great interest.
② Obtain a development account
After that, we created an account for each participant in order to actually proceed with the development at hand. By creating an account, a workspace is created in the cloud area, so individual development is possible by installing the development tool ServiceStudio.
③ High-speed development experience using scaffolding function
After setting up the environment, we demonstrated the development.
Here, we had students experience development using the scaffolding function of Outsysmtes.
This function is an Outsystems development assistance function that automatically creates templated list/detail screens based on entity (table) definitions that have been created in advance. The existence of this feature allows Outsystems to create general master/detail screens much faster than with scratch development. One member of the team who has actually done scratch development for web applications said, “It was more than I imagined that something that would have taken two to three days to do by hand could be done with such simple operations”.
In conclusion
This study session was mainly aimed at members who had no experience developing with Outsystems, so the learning content was mainly basic. In the future, we will gradually step up the learning content, including screen development with Outsystems without using the scaffolding function,“batch data import/output function” and “utilization of the open source library “Forge”. We plan to continue learning about practical content.
Please look forward to the next study session article.