Forum Stats

  • 3,757,146 Users
  • 2,251,201 Discussions
  • 7,869,743 Comments

Discussions

How to Emulate Landscape Mode From Version 10 in Version 12 Interview?

I am upgrading a rulebase from version 10 to version 12 and have numerous interview screens which used to use landscape mode to collect entity instances. In version 10, there are 3 display style options for the entity collection controls: portrait, landscape, and tabular. In version 12, I can only see two options: tabular and portait.


Is there a way to make version 12 interview screens look the same as landscape mode using either tabular or portrait? I have attached a screenshot of a version 10 landscape entity collection where the instances are laid out in columns next to one another which I cannot figure out in version 12.


Any advice would be appreciated. Thanks!

Best Answer

  • Richard Napier
    Richard Napier Member Posts: 241 Silver Badge
    Accepted Answer

    Hi There

    You are right, in the sense that Landscape was dropped in 12. Here are some ideas to get you started.

    1) The Healthy Eating Example project is present in 10 and 12. In 10 it used Landscape mode for the Child entity collect. In 12 it uses Tabbed mode. This is a good starting point for looking both at alternatives and at how the page is constructed.

    That being said :

    2) Switch into Portrait mode and you will see that the HTML is very cleanly constructed and is actually a good starting point for modification, more so than Tabbed.

    You will see that the entire entity collect is housed in a DIV using a CSS class called opa-entity-collect-instances. The individual instances of the entity are within this structure:

    This structure means that it probably will respond well to something like a FlexBox approach which has reasonably good browser support (https://caniuse.com/?search=Flexbox).

    Adding a flexbox in the CSS for the above div, and setting the parameters accordingly, for example using Chrome Console shows that it would appear to work pretty much as expected with only a tiny amount of CSS (of course, I am not telling you that this would work for your scenario, just that the approach is worth investigating).

    As you can see in the above screen capture, adding the necessary CSS has caused the second instance to align to the right of the previous one. Each new instance will add to the right of the previous one:


    This is probably worth investigating therefore - either as a CSS Style extension, a JS extension or a straight-up CSS addition. (PS in the screenshot those ugly buttons are my own, from another job).

    Hope this helps.

    Richard

Answers

  • Richard Napier
    Richard Napier Member Posts: 241 Silver Badge
    Accepted Answer

    Hi There

    You are right, in the sense that Landscape was dropped in 12. Here are some ideas to get you started.

    1) The Healthy Eating Example project is present in 10 and 12. In 10 it used Landscape mode for the Child entity collect. In 12 it uses Tabbed mode. This is a good starting point for looking both at alternatives and at how the page is constructed.

    That being said :

    2) Switch into Portrait mode and you will see that the HTML is very cleanly constructed and is actually a good starting point for modification, more so than Tabbed.

    You will see that the entire entity collect is housed in a DIV using a CSS class called opa-entity-collect-instances. The individual instances of the entity are within this structure:

    This structure means that it probably will respond well to something like a FlexBox approach which has reasonably good browser support (https://caniuse.com/?search=Flexbox).

    Adding a flexbox in the CSS for the above div, and setting the parameters accordingly, for example using Chrome Console shows that it would appear to work pretty much as expected with only a tiny amount of CSS (of course, I am not telling you that this would work for your scenario, just that the approach is worth investigating).

    As you can see in the above screen capture, adding the necessary CSS has caused the second instance to align to the right of the previous one. Each new instance will add to the right of the previous one:


    This is probably worth investigating therefore - either as a CSS Style extension, a JS extension or a straight-up CSS addition. (PS in the screenshot those ugly buttons are my own, from another job).

    Hope this helps.

    Richard

  • Griffin Scott
    Griffin Scott Member Posts: 5 Green Ribbon

    Thank you Richard! I will work with this and look into a CSS style extension.


    Cheers.

  • Jasmine Lee-Oracle
    Jasmine Lee-Oracle Member Posts: 713 Employee

    Hi Griffin,

    Just want to throw another thought out there... Does really it need to be exactly identical? There are lots of out-of-the-box options for interview screens in v12. In most situations, far more options than existed for v10 web determinations. 

    When I've been talking with other v10 customers, I've suggested they consider looking at it as an opportunity to revamp what they were doing before, rather than just recreating their v10 web determinations in v12.

    Just a thought... :)

    Cheers,

    Jasmine

  • Griffin Scott
    Griffin Scott Member Posts: 5 Green Ribbon

    Hey Jasmine,


    Appreciate the response! I do agree with you on that one but the customer in this instance wants to match the earlier version as close as possible. We'll see if we can sell them on some change..


    Best,


    Griffin