Visual Builder

Get Involved. Join the Conversation.

Topic

    Sten
    How to create VBCS responsive designAnswered
    Topic posted November 8, 2018 by Sten Red Ribbon: 250+ Points, tagged UI 
    343 Views, 9 Comments
    Title:
    How to create VBCS responsive design
    Summary:
    We used to have a tab where you could select which fields to show in which resolutions. That seems to be gone in 18.4?
    Content:

    We used to have a tab where you could select which columns in a table would be displayed in which layouts (iphone, tablet, horizontal/vertical). I can't find that option in 18.4 - was it taken out or did it move to somewhere that I can't find?

    Best regards
    Sten Vesterli

    Version:
    Version: 18.4.1 Build Number: c1b87e0cb22e2ba5b70706fc9bfa3c4b0f58351a (2018-10-09 23:07:49) Runtime Version: 18.4.1.5 JET runtime version: v5.2.2

    Best Comment

    Shay Shmeltzer

    For hiding columns in a table try this:

    Drag a UI component such as an "Text" from the component palette onto the column you have in the table.

    This will add a template column to your code. Resulting in something like this:

        <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table-1904746644-1" class="oj-flex-item oj-sm-12 oj-md-12" data="{{ $page.variables.TravelArray }}" columns='[{"headerText":"name","field":"name","template":"name"},{"headerText":"cost","field":"cost"}]'>
            <template slot="name">
                <oj-bind-text value="[[$current.data]]"></oj-bind-text>
            </template>
        </oj-table>

    You can now surround that template with oj-bind-if condition.

    Comment

     

    • Shay Shmeltzer

      That design time functionality was removed since now you have much more control over the layout you create.

      VB uses the JET layout components that have responsive behavior built-in.

      Some info on this:

                                            3 Designing Responsive Applications                                   

      https://www.youtube.com/watch?v=giTBTdd8IMs

      In addition you can use the oj-bind-if to surround items/areas that you want to hide and base the condition of showing/hiding on the screen size.

    • Sten

      I realize that I can surround items with an if construct controlled by the screen size. However, that is way more complicated than the simple functionality you took away, moving VBCS away from the low code approach and into being a just a lightweight JET development tool.

      Also, I can't seem to figure out how to conditionally hide columns from a table, which used to work with the old feature.

    • Shay Shmeltzer

      For hiding columns in a table try this:

      Drag a UI component such as an "Text" from the component palette onto the column you have in the table.

      This will add a template column to your code. Resulting in something like this:

          <oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table-1904746644-1" class="oj-flex-item oj-sm-12 oj-md-12" data="{{ $page.variables.TravelArray }}" columns='[{"headerText":"name","field":"name","template":"name"},{"headerText":"cost","field":"cost"}]'>
              <template slot="name">
                  <oj-bind-text value="[[$current.data]]"></oj-bind-text>
              </template>
          </oj-table>

      You can now surround that template with oj-bind-if condition.

      • Preetesh Dongre

        Hi Shay,

        I tried this as you suggested, but not seeing any effect on my table, I could still see the column.

        Am I missing something or there is some change in 19.1.3

                        <oj-bind-if test="{{$page.variables.falseValue}}">
                            <template slot="PoLineNumTemplate">
                                <oj-bind-text value="[[ $current.data ]]"></oj-bind-text>
                            </template>
                        </oj-bind-if>

        Regards,

        Preetesh

        • Preetesh Dongre

          Hi Shay,

          Can you throw some light on this? I am able to hide the contents of the column via 'bind-if' but not the column. 

          Regards,

          Preetesh

          • Shay Shmeltzer

            To hide a column you would need to modify the columns attribute of the table.

            You can have this attribute bound to a variable and modify the variable value based on how many columns you would want to show.

            One other note - if you are targeting a mobile device our UI people will recommend using a list view rather than a table - it is much more suited for smaller screens.

            • Preetesh Dongre

              Hi Shay,

              Sounds like a long route for a simple requirement, but thanks for the way around.

              Regards,

              Preetesh

            • Abhilasha Singh

              Hi Shay,

              Can you elaborate more on this? I need to show/hide few columns of the table table depending on the tab selected. 

              Thanks,

              Abhilasha

      • Sten

        Thanks a lot for the example. You are also nicely illustrating my point that VBCS has stopped being a low-code tool...