COMMON POWERUp 2026

Most seasoned RPG developers have mastered the principles behind 5250-based (green screen) display files, deftly incorporating function keys, multi-line folding subfiles, overlaying windows and creative field abbreviations into text-based interfaces. But today's users — particularly younger ones — tend to demand more intuitive, browser-based interfaces to get their work done. To be effective with web-based applications on IBM i, we developers must apply substantially different design philosophies from what we'd become accustomed to in the green screen world.

This mostly non-technical session is focused on the art and science of designing effective web page layouts for business-centric applications, leveraging modern UI components like drop-downs, auto-complete, scrolling, accordion layouts, pop-ups, etc. We'll explore what makes an application visually appealing and user-friendly, with a discussion of web design best practices. We'll touch on the KISS (Keep It Simple, Stupid) principle and "less is more" philosophy, ensuring your next generation of IBM i applications are both functional and engaging for your users.

Learning Objectives:

* Gain awareness of modern UI components, such as drop-down menus, auto-complete fields, vertical/horizontal scrolling, accordion layouts, pop-up elements, etc., and their roles in enhancing the user experience
* Learn page layout and wire framing strategies to help transition from 5250 green screens to clean, intuitive, browser-based designs
* Understand web design best practices, prioritizing clarity, consistency, and accessibility in your application interfaces
* Appreciate the benefits of applying a "less is more" philosophy to eliminate clutter, focus on essential elements, and create elegant & efficient screen layouts

While we did a lot of Projects in the past two years where we used various AI Technologies in different ways, we also created a little tool that is able to convert your 5250 Display Files to html and then create React components out of that as well as other target UI Frameworks. Some might say that is not that hard, because 5250 DSPF DDS is not that complicated and you are right. Back in 2009 I already created a converter Tool that converted 5250 DDS to Microsoft XAML for using that within my c# programs. BUT - the difference of this tool is, that it includes the RPG code into the transformation process. Why? For example think about pressing F4 button in a 5250 screen. Where does the Data come from? How does the 5250 DSPF knows what to do? That is handled in the RPG / Cobol program in the background in one way or the other and the tool covers that with little to no manual effort. The Tool I show you combines the DDS from the DSPF with the RPG logic and uses both information to create the result. The result can be a React App or a Flutter App or an Angular App or .... whatever you want - OK - maybe no Windows Forms ;-)

Learning Objectives:

Learn about using different technologies to modernize your old stuff like 5250 DSPF with RPG or Cobol or transform it to something totally new. Learn a little bit about modern UI Frameworks like React as well as how you could and should use AI technologies to reach your goals in a much faster and better way. You will also see what is coming next with this approach we do like reusing all your (old) RPG Code without (or only little) effort to adapt. We are working hard on making things easier and faster for everyone and bring you into the present and a bright future.

This is an introduction to the React front-end framework. We will set up a development environment and incrementally build an application as we learn about React hooks.

Learning Objectives:

1. How to get started with React 2. How to create web pages with React 3. Manage state with React hooks 4. Serve your React app from IBM i