Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Former Member

This is the second in a series of posts that cover the new AppBuilder tool, from the perspective of current (or former) PowerBuilder developers.  The initial blog post can be found here.

The goal of this series will be to introduce development techniques that are either very similar to, or very different from, development with PowerBuilder.  A great deal of the DNA of AppBuilder comes from PowerBuilder, and as a PB guy, this "close but not quite the same" has made the transition a bit sticky. 

Tip #2: Get to know CSS (Cascading Style Sheets)

PowerBuilder developers (and to some extent, VB/C#/C++ developers as well) have always been able to set the properties of a control right in the designer. Changing any of the visible attributes of a control was as easy as point-and-click. Select the control, and the painter toolbar alters its context to show only the properties that are pertinent to that control.  With a WYSIWYG designer like PB, any changes are instantly visible in the painter.  Also, applying a single property change to a set of controls was just as easy - lasso-select or multi-select the desired controls, and instantly change any common property.

Figure 1 shows the Font panel of the PB datawindow painter.  Look at all those individual properties!  And this is just the Font panel!

This was a fantastic convenience during the development of a single screen or datawindow.  Complex screens and datawindows could be constructed in a fraction of the time that traditional 3GL coding would have taken.  But every convenience seems to come with a downside, and for PB, there was no “easy” way to apply simple graphic changes across the entire depth and breadth of an application. 

For example, if the users said “We don’t like the Tahoma font anymore.  Please change every text control on every screen and datawindow from Tahoma to Verdana.”   

Uh oh...  

This meant you (or some unfortunate college intern) had to open every window and datawindow control one by one, select all the text controls, change the font face property, save the changes back to the PBL, recompile, and redistribute the compiled app to the users.  There really was no facility to collect all the common visual attributes into a named “template”, and link that template to specific controls.  If that had been available, then you’d have been able to make the single change to the template, and have that change ripple to every affected control across the app.

This wasn't just a PB problem - web developers faced it too.  Every time an app-wide change needed to be made, they had to resort to global edit/replace tools to change the HTML code for the web app. This is the primary reason Cascading Style Sheet (CSS) technology was invented.

Introducing CSS

CSS is a fundamental web design technology that separates the visual properties of a web page from the HTML markup and Javascript code of the implementation.  With CSS, you create named “classes” that encapsulate a set of properties like font face, point size, color, gradient, and width/height/alignment rules, and then you "bind" HTML elements to those classes.  Every element in the HTML markup of a web page can be assigned to one or more CSS classes. The browser handles the job of matching up the HTML element to its CSS class, and rendering the web page with the desired graphic effect. Using CSS can be a little more time consuming during the development phase, when screen layouts and designs are still very fluid and rapidly changing, but the real payoff is realized during system maintenance.  App-wide changes like the one described above can be implemented with a single change to one line of CSS code.

CSS in AppBuilder

The AppBuilder SuperList designer utilizes CSS as well. So, if you’re a PB developer, and you’re looking for the Font dropdown list, the BackColor dialog, or the Alignment buttons, you won’t find them in AppBuilder!  All graphical properties, unless they're specifically listed in the control's Property panel, will be changed by using CSS styles. 

Every AppBuilder project comes with a default CSS file called CustomStyles.css.  This file can be found by clicking the Project panel, and expanding the css folder. Figure 2 below shows the location of the CustomStyles.CSS file in the sample SuperList demo application.

Changes to custom CSS styles can either be placed directly into this file, or a new .CSS file can be created.  Dropping any .CSS file into this folder tells AppBuilder to automatically include it in your project. 

Double-click the file to open it in the AppBuilder editor.  (You can also use any 3rd-party CSS editing tool to manage your custom styles.)  Scroll down to see the custom styles that have been added into this file.  They start on line 41 with the text: 


This is not meant to be a full tutorial on CSS techniques, but take notice of several key differences:

  • The .list-line1 style contains the font-weight:bold directive;
  • The .list-line2 style changes the text color to a light gray (hex code #666666), and sets the font-size to 80%;
  • There are three styles further down in the file (.Ter, .Lea, and .Act) that set different text colors (red, blue, and green, respectively)

Now go back to the Project panel, look in the View folder, and double-click the EmpDetail.slmeta file to open the SuperList painter.  Select the label control named EmpName (the first one in the detail band), and examine its Classes property – it’s set to the string value ‘list-line1’.  This assignment binds this control to that specific CSS style, so any changes to that style will be automatically rendered in this control and any others assigned to ‘list-line1’. 

Click the little arrow next to the Classes property to open the Properties dialog (PB developers: this is the same concept behind theExpression dialog for PB control properties – it only shows up next to properties that are “expressionable”).  Figure 3 below shows the Properties dialog window for the EmpName control. 

The list box "Available Classes" shows the names of any CSS classes defined in the .CSS files linked to the project.  To assign one to a control, just scroll down and double-click the one you want. NOTE:  all expressions must evaluate to a string, so remember to wrap all class names and expressions in single quotes. The dialog does NOT put them on there for you. (Yet another usability enhancement I've requested...)  

The second control ‘gender’ is assigned the class ‘list-line2’, and you can see that it’s font is a light gray, and slightly smaller than the default.

One neat feature of CSS is the ability to assign multiple classes to a single control.  For example, let’s say you wanted to define font characteristics (face, point size, color) in one class, and dimension characteristics (height, width, float) in another.  You could assign both styles in a single expression simply by separating them with a space inside single quotes. ‘fontBold alignRight’

Now select the third control - ‘status’, and open its Properties dialog. 

PB developers: notice that strange-looking CSS class in the Expression Definition box?  Doesn't that look familiar?  That’s a PB expression!  Those are nested IF() methods, dynamically assigning the CSS class based on the contents of the ‘status’ field from the datastructure.  This works exactly like it does in PB (although a CASE() method would be a nice addition here…)  And take note of the Javascript syntax for equality comparison - "==" vs "=".

Wrapping Up

A great deal of the functionality in the SuperList designer was borne from the PowerBuilder datawindow painter, so PB developers should see a lot of similarity there.  But navigating the differences between the two can be a bit of a challenge.  Just remember that you’re developing a web application now, and understanding web techniques like CSS will be crucial to your success.