Product Workbench - Adding scroll bar to the list view

[former_member768780]

Hello,

List view is cut off. Is it possible to add a horizontal scroll bar to show the whole content?

[former_member632827]

Automatically It supports a scroll bar. Can you share edit area config details of the productReferences attribute?

[former_member768780]

This is the config that I use :

<context type="ProductReference" component="listview">
   <list-view:list-view>
      <list-view:column qualifier="productReferences" label="" width="25px" spring-bean="referenceInheritanceIconRenderer" />
      <list-view:column qualifier="referenceType" position ="1"/>
      <list-view:column qualifier="source" position ="2" hflex="min"/>
      <list-view:column qualifier="target" position ="3" hflex="min"/>
      <list-view:column qualifier="quantity" position ="4" hflex="min"/>
      <list-view:column qualifier="Role" position ="5" hflex="min"/>
      <list-view:column qualifier="Need" position ="6" hflex="min"/>
      <list-view:column qualifier="Context" position ="7" hflex="min"/>
      <list-view:column qualifier="Usage" position ="8" hflex="min"/>
      <list-view:column qualifier="Division" position ="9" hflex="min"/>
      <list-view:column qualifier="ChannelPartner" position ="10" hflex="min"/>
      <list-view:column qualifier="global" position ="11" hflex="min"/>
      <list-view:column qualifier="active" merge-mode="remove"/>
      <list-view:column qualifier="qualifier" merge-mode="remove"/>
   </list-view:list-view>
</context>

I've tried also this :

<context type="ProductReference" component="listview">
   <list-view:list-view>
      <list-view:column qualifier="productReferences" label=""/>
      <list-view:column qualifier="referenceType" position ="1"/>
      <list-view:column qualifier="source" position ="2" hflex="min"/>
      <list-view:column qualifier="target" position ="3" hflex="min"/>
      <list-view:column qualifier="quantity" position ="4" hflex="min"/>
      <list-view:column qualifier="Role" position ="5" hflex="min"/>
      <list-view:column qualifier="Need" position ="6" hflex="min"/>
      <list-view:column qualifier="Context" position ="7" hflex="min"/>
      <list-view:column qualifier="Usage" position ="8" hflex="min"/>
      <list-view:column qualifier="Division" position ="9" hflex="min"/>
      <list-view:column qualifier="ChannelPartner" position ="10" hflex="min"/>
      <list-view:column qualifier="global" position ="11" hflex="min"/>
      <list-view:column qualifier="active" merge-mode="remove"/>
      <list-view:column qualifier="qualifier" merge-mode="remove"/>
   </list-view:list-view>
</context>

[former_member768780]

Hi, thanks for your answer! It didn't solve my issue.

[former_member632827]

Hey,

I did not find the edit area configurations of the product#productReferences attribute in the attached code. We can get scroll bars when using editorArea:panel and colspan&rowspan.

May be useful, you can check the europe1Prices attribute configuration of the product. Also we have another attribute width in <list-view:column/> tag.

<editorArea:panel colspan="2" name="panel.europe1Prices" rowspan="2">
                        <editorArea:attribute qualifier="europe1Prices" description="hmc.text.product.pg"
                            editor="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
                            <editorArea:editor-parameter>
                                <editorArea:name>listConfigContext</editorArea:name>
                                <editorArea:value>europe1PricesListView</editorArea:value>
                            </editorArea:editor-parameter>
                            <editorArea:editor-parameter>
                                <editorArea:name>configurableFlowConfigCtx</editorArea:name>
                                <editorArea:value>create-wizard-no-save</editorArea:value>
                            </editorArea:editor-parameter>
                        </editorArea:attribute>
</editorArea:panel><br>

[former_member768780]

My bad. This is my editor area configuration :

<editorArea:tab name="gpim.pcmbackoffice.product.editorarea.tab.productreferences" position="9" displayEssentialSectionIfPresent="false">
   <editorArea:section name="gpim.pcmbackoffice.product.editorarea.tab.productreferences" columns="1">
      <editorArea:attribute qualifier="productReferences" editor="gpim.bo.editors.gpiminheritanceextendedmultireferenceeditor">
         <editorArea:editor-parameter>
            <editorArea:name>listConfigContext</editorArea:name>
            <editorArea:value>listview</editorArea:value>
         </editorArea:editor-parameter>
      </editorArea:attribute>
      <editorArea:attribute qualifier="reverseProductReferences" editor="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
         <editorArea:editor-parameter>
            <editorArea:name>listConfigContext</editorArea:name>
            <editorArea:value>listview</editorArea:value>
         </editorArea:editor-parameter>
      </editorArea:attribute>
   </editorArea:section>           
</editorArea:tab>

[former_member768780]

I've edited my configuration as you suggested and the horizontal scroll bar is now visible. Is there a way to increase the height and remove the vertical scroll bar or at least show the whole content without scrolling up and down?

<editorArea:tab name="gpim.pcmbackoffice.product.editorarea.tab.productreferences" position="9" displayEssentialSectionIfPresent="false">
   <editorArea:section name="gpim.pcmbackoffice.product.editorarea.tab.productreferences">
      <editorArea:panel name="" colspan="2">
         <editorArea:attribute qualifier="productReferences" editor="gpim.bo.editors.gpiminheritanceextendedmultireferenceeditor">
            <editorArea:editor-parameter>
               <editorArea:name>listConfigContext</editorArea:name>
               <editorArea:value>listview</editorArea:value>
            </editorArea:editor-parameter>
         </editorArea:attribute>
         <editorArea:attribute qualifier="reverseProductReferences" editor="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
            <editorArea:editor-parameter>
               <editorArea:name>listConfigContext</editorArea:name>
               <editorArea:value>listview</editorArea:value>
            </editorArea:editor-parameter>
         </editorArea:attribute>
      </editorArea:panel>
   </editorArea:section>
</editorArea:tab>

[former_member632827]

Hey, You can try like below. Accept the answer, if it solves the problem.Then it will be helpful to others.

<editorArea:section name="gpim.pcmbackoffice.product.editorarea.tab.productreferences">
      <editorArea:panel name="" rowspan="2" colspan="2">
         <editorArea:attribute qualifier="productReferences" editor="gpim.bo.editors.gpiminheritanceextendedmultireferenceeditor">
            <editorArea:editor-parameter>
               <editorArea:name>listConfigContext</editorArea:name>
               <editorArea:value>listview</editorArea:value>
            </editorArea:editor-parameter>
         </editorArea:attribute>
      </editorArea:panel>
     <editorArea:panel name="" rowspan="2" colspan="2">
               <editorArea:attribute qualifier="reverseProductReferences" editor="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
               <editorArea:editor-parameter>
               <editorArea:name>listConfigContext</editorArea:name>
               <editorArea:value>listview</editorArea:value>
            </editorArea:editor-parameter>
         </editorArea:attribute>
       </editorArea:panel> 
   </editorArea:section>