Lawson Design System

When we started the Lawson Smart Client project we worked together with Frog Design. Frog did the design and delivered the Lawson Design System a set of guidelines for Lawson applications in general and for the Lawson Smart Client. Frog called it Smarter Software.

For the different XAML controls we have a global style implementation. In this post I’ll show an overview of controls that you can use in your Mashups and applications. If you have the SDK pack there is a DesignSystem example project. I you haven’t checked it out yet it is a must.

The sample also contains a list of current brushes. Note that brushes might change in coming versions. You can use the color but we can’t guarantee that the brush will stay in Smart Office forever. A way to handle that uncertainty is to create your own brushes locally that mimics the style that you want.

I’ll present the some of the controls here for Mashups developers. Check out this overview Mashup.

Here is the mashup code:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
  <Grid.Resources>
  </Grid.Resources>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <ScrollViewer>
          <StackPanel Orientation="Vertical">

            <Button Width="150" Margin="8" Content="Primary Button" Style="{DynamicResource styleButtonPrimary}" />

            <Button Width="150" Margin="8" Content="Disabled Primary Button" IsEnabled="False" />

            <Button Width="150" Margin="8" Content="Secondary Button" Style="{DynamicResource styleButtonSecondary}" />

            <Button Width="150" Margin="8" Content="Disabled Secondary Button" IsEnabled="False" Style="{DynamicResource styleButtonSecondary}" />

            <Button Width="150" Margin="8" Content="Button Override" FontFamily="Times New Roman" FontWeight="Bold" FontStyle="Italic" FontSize="16" Style="{DynamicResource styleButtonSecondary}" />

            <CheckBox Margin="8" IsChecked="True" Content="Check Box" HorizontalAlignment="Center" />

            <CheckBox Margin="8" IsChecked="True" Content="Disabled Check Box" IsEnabled="False" HorizontalAlignment="Center" />

            <RadioButton Margin="8" IsChecked="True" Content="Radio Button" HorizontalAlignment="Center" />
            <RadioButton Margin="8" Content="Second Radio Button" HorizontalAlignment="Center" />
            <RadioButton Margin="8" Content="Disabled Radio Button" IsEnabled="False" HorizontalAlignment="Center" />

            <Label Margin="8" Content="Label" HorizontalAlignment="Center" />

            <Label Margin="8" Content="Label Override" HorizontalAlignment="Center" FontFamily="Times New Roman" FontWeight="Bold" FontStyle="Italic" FontSize="16" />

            <Label Margin="8" Content="Tool Tip" HorizontalAlignment="Center">
              <Label.ToolTip>
                <TextBlock TextWrapping="Wrap" Width="300">
                  Nunc vel sem. Integer vel nisi. Proin augue libero, volutpat sed, facilisis sed, faucibus ac, eros. Vivamus massa enim, hendrerit in, sagittis at, scelerisque nec, libero. Nulla ultrices. Duis venenatis. Phasellus porta neque eget sem pellentesque porttitor. Sed ac nisl. Morbi ac odio. Etiam vehicula sapien at augue. Nullam ut orci. Duis interdum est id nunc pharetra ultrices. Integer fermentum. Etiam mattis diam at libero. Fusce consequat mattis nulla. Sed at elit ut nibh pharetra interdum.
                </TextBlock>
              </Label.ToolTip>
            </Label>

            <TextBlock Style="{DynamicResource styleTextBlock}" Margin="8" Text="TextBlock with default font size" HorizontalAlignment="Center" />
            <TextBlock Style="{DynamicResource styleTextBlock}" Margin="8" Text="TextBlock with smaller font size" FontSize="{DynamicResource fontSizeSmaller}" HorizontalAlignment="Center" />
            <TextBlock Style="{DynamicResource styleTextBlock}" Margin="8" Text="TextBlock with larger font size" FontSize="{DynamicResource fontSizeLarger}" HorizontalAlignment="Center" />
            <TextBlock Style="{DynamicResource styleTextBlock}" Margin="8" Text="TextBlock Override" HorizontalAlignment="Center" FontFamily="Times New Roman" FontWeight="Bold" FontStyle="Italic" FontSize="16" />

            <TextBox Width="200" Margin="8" HorizontalAlignment="Center" Text="TextBox" />
            <TextBox Width="200" Margin="8" HorizontalAlignment="Center" Text="Disabled TextBox" IsEnabled="False" />

            <TextBox Width="200" Margin="8" HorizontalAlignment="Center" Text="TextBox Override" FontFamily="Times New Roman" FontWeight="Bold" FontStyle="Italic" FontSize="16" />

            <ComboBox Width="200" Margin="8" HorizontalAlignment="Center">
              <ComboBoxItem IsSelected="True">Combo Box Item 1</ComboBoxItem>
              <ComboBoxItem IsSelected="True">Combo Box Item 2</ComboBoxItem>
              <ComboBoxItem IsSelected="True">Combo Box Item 2</ComboBoxItem>
            </ComboBox>

            <ComboBox Width="200" Margin="8" HorizontalAlignment="Center" IsEditable="True">
              <ComboBoxItem IsSelected="True">Editable ComboBox</ComboBoxItem>
            </ComboBox>

            <ComboBox Width="200" Margin="8" HorizontalAlignment="Center" IsEnabled="False">
              <ComboBoxItem IsSelected="True">Disabled Combo Box Item 1</ComboBoxItem>
            </ComboBox>

            <Label Margin="8,8,8,0" Style="{DynamicResource styleGroupBoxHeader}" Content="Group Box" HorizontalAlignment="Center" />
            <GroupBox Height="100" Width="300" Margin="8,0,8,8" HorizontalAlignment="Center">
              <TextBlock Text="GroupBox content..." HorizontalAlignment="Center" VerticalAlignment="Center" />
            </GroupBox>

            <GroupBox Width="300" Margin="16,0,8,8" Header="Group Line" Style="{DynamicResource styleGroupLine}" HorizontalAlignment="Center" />

            <Expander Header="Expander" Margin="8" Width="300" HorizontalAlignment="Center">
              <TextBlock TextWrapping="Wrap" Margin="8">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer placerat fringilla odio. Cras tincidunt rhoncus leo. Phasellus metus nulla, laoreet ac, lobortis vel, tempor in, tellus. Vivamus rhoncus vestibulum purus. Cras tristique eleifend est. Donec vitae mauris vel erat sollicitudin dapibus. Integer interdum. Nullam ac lacus. Aenean tortor metus, interdum ut, vestibulum id, fringilla nec, odio. Cras quis massa. Phasellus metus erat, semper in, egestas in, egestas et, nisi. Phasellus non risus quis odio blandit bibendum. Etiam et risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam consectetuer. Mauris aliquam. Nullam pede sapien, euismod et, laoreet id, malesuada rhoncus, augue.
              </TextBlock>
            </Expander>

            <Expander Header="Disabled Expander" IsEnabled="False" Margin="8" Width="300" HorizontalAlignment="Center" />

            <Label Margin="8,8,8,0" Content="ProgressBar" HorizontalAlignment="Center" />
            <ProgressBar Margin="8" Width="200" Value="55" Maximum="100" Minimum="0" HorizontalAlignment="Center" />

            <Label Margin="8,8,8,0" Content="Slider" HorizontalAlignment="Center" />
            <Slider Margin="8" Width="200" Value="45" Minimum="0" Maximum="100" HorizontalAlignment="Center" />

            <Label Margin="8,8,8,0" Content="ListBox" HorizontalAlignment="Center" />
            <ListBox Margin="8" Width="300" Height="100" HorizontalAlignment="Center">
              <ListBoxItem>Item 1</ListBoxItem>
              <ListBoxItem>Item 2</ListBoxItem>
              <ListBoxItem>Item 3</ListBoxItem>
              <ListBoxItem>Item 4</ListBoxItem>
              <ListBoxItem>Item 5</ListBoxItem>
              <ListBoxItem>Item 6</ListBoxItem>
              <ListBoxItem>Item 7</ListBoxItem>
              <ListBoxItem>Item 8</ListBoxItem>
              <ListBoxItem>Item 9</ListBoxItem>
            </ListBox>

            <Label Margin="32,8,8,0" Content="ListView with GridView" HorizontalAlignment="Center" />
            <ListView Margin="8" Width="400" Height="200" HorizontalAlignment="Center" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
              <ListView.View>
                <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
                  <GridView.Columns>
                    <GridViewColumn Header="Column 1" />
                    <GridViewColumn Header="Column 2" />
                    <GridViewColumn Header="Column 3" />
                  </GridView.Columns>
                </GridView>
              </ListView.View>
              <ListView.Items>
                <ListViewItem>Item 1</ListViewItem>
                <ListViewItem>Item 2</ListViewItem>
                <ListViewItem>Item 3</ListViewItem>
                <ListViewItem>Item 4</ListViewItem>
                <ListViewItem>Item 5</ListViewItem>
                <ListViewItem>Item 6</ListViewItem>
                <ListViewItem>Item 7</ListViewItem>
                <ListViewItem>Item 8</ListViewItem>
                <ListViewItem>Item 9</ListViewItem>
              </ListView.Items>
            </ListView>

            <Control Margin="0,8,0,0" Style="{DynamicResource styleActivityIndicator}" FocusVisualStyle="{x:Null}">
              <Control.Resources>
                <SolidColorBrush x:Key="brushFillActivityIndicator" Color="#FF0065A4" />
              </Control.Resources>
            </Control>
          </StackPanel>
        </ScrollViewer>

  <ui:StatusBar Name="StatusBar" Grid.Row="2" Grid.Column="0" />
</Grid>

Update by Karin – Infor Design System – new since Smart Office 10.1

Since Smart Office 10.1 we no longer follow the Lawson Design System. Instead we have done a redesign to the new Infor standard. The last version is called SoHo. This means that a range of the blue brushes will no longer be available. In the design system example we list all brushes but not all brushes exists in the new SoHo look and feel. Brushes that have been specifically documented in the Developers Guide (for the SDK) will continue to exist. Among those are the brushes that should be used for widget development and brushes used in standard controls. Always use the name of a brush instead of hardcoding colors. That will give you are smooth ride into version 10.1.

Almost all Mashups and features that has been developed for previous versions will continue to work in 10.1 but there might be some issues with margins and colors. We have so far not seen a single feature or Mashup that did not work at all but it is possible depending on if you have used brushes that has been removed. So it is possible but not likely. When developing for both versions there are some tradeoffs that you need to consider, such as how you set your margins.

With the many new icons and iconbuttons that we have for 10.1 it is likely that you would want to develop for 10.1 and use all the new features that are available to you. Using buttons is very common in mashups and now you can save space with icon buttons instead.

8 thoughts on “Lawson Design System

    1. karinpb Post author

      Hi,
      I’m not sure if you mean in M3 or Lawson.
      For M3 you can’t be sure that all rows are loaded unless they are fewer than 33 on initial load. You would need to create Integers from the text value and compare and only keep the lowest value, loop trough all rows and then add the value to the text box. I think the examples that add a column to a list would help you get started since they show how to loop via the list. I don’t have an example for this scenario but there is enough information on the blog to learn what you need – if you have programming experience.

      Reply
  1. Oscar

    We’ve built a Smart office app for a customer, and now they have upgraded their Smart Office to 10.2. Previously they had the same blue theme across the application, but now they want the set theme in Smart Office to be reflected on the wpf-controls in the app.

    We added the new SDK-dll:s and created a new Feature/Client project in the solution and it’s running like before. However, the Smart Office theme is not set on the standard controls in the app (like buttons, textboxes etc.), e.g. it remains blue even though the theme in Smart Office is set to red.

    I’ve been tryingt to find something regarding this in the documentation and on the blog, but I can’t find any information. Do you have any idea on what we’re missing or what we can do when the default style is not set on the wpf-controls by smart office?

    Reply
    1. karinpb Post author

      Hi Oscar,
      Your question is a confusing to me. In Smart Office we change the default styles of all standard controls, this will be inherited in the visual tree for all applications running in Smart Office. It seems to me that you still are using a reference to the old designsystem – but in that case everything in Smart Office would have the previous style with for example a gradient background color – it would not just affect your application.

      The way we set up the styles is that we change all default styles so it shouldn’t be possible to have two application windows with different styles running at the same time. Manual changes might be needed for the margin changes that we did but unless you used hardcoded colors and set your own styles – then you should get your new style automatically.

      We are talking about an application running in Smart Office right? Perhaps if you could share a link to an image or something I might be able to think of something. Are you using third party controls in your application that were styled to match the old theme? Please explain more about your application.

      Reply
      1. Oscar

        Hello, thanks for a fast response 🙂

        Here is a picture of the application. The theme set in Smart Office is red. But for some reason the default style isn’t applied on the standard buttons/labels in the application, only the application header.

        The encircled buttons (see pic 2) which are standard-wpf without any style set, they are not getting the SO-default style. I’d like to understand why. I could not find any global style for buttons within the application.

        Pic 1, Picture of application: http://imgur.com/xrmECyH
        Pic 2, Picture of XAML for the buttons: http://imgur.com/M7HZjb3

        The application runs in Smart Office yes (WPF). We have customized controls, which we have made ourselves, but the buttons/labels are standard.

      2. karinpb Post author

        You mentioned that you created a new SDK Project. There has to be an issue with the download of the colors or an issue with the mergin of the styles.

        Check the output in Visual Studio for hints, the Smart Office log as well. It seems you have the new style – just not the red color and changing to red would be visible in log in debug. If you deploy your feature – I guess it would pick up the color so it is something with the project or the SDK. Can you please check the log in debug?

        One option since this is making me puzzled is to zip and send me the entire setup. Also show me a screenshot with a M3 program and your panel side by side with the entire Smart Office. Let me know how your investigation goes as I can see your email and contact you next week 😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s