How to add 2 or more tables to a single container with full screen functionality?

[alain_more]

Hello everyone!

I'm quite new to the sapui5 development world. I need to build an app with a couple of filters, a chart and 3 tables. These 3 tables need to be aligned and bound in the same panel/container, and be visible at the same time... I have managed to do this without problems by adding the 3 tables to a single Panel. Since the tables can be a bit large, a full screen toggle for the whole panel is required, to view all tables, at the same time, in full screen mode. For this, I added a chartcontainer, however, when I do this, only the 3rd table is shown, and the other 2 don't show up anymore.

Is there any object or container that will allow me to maximize to full screen the full container with all tables inside of it? Or maybe there's a better way to this requirement that Ii'm unaware of?

Thanks for your help!

[maheshpalavalli · Accepted solution]

Hi Alain More Maceda,

Can you try putting multiple chartcontainercontent and insert a table inside each charcontainer content:

<cc:ChartContainerContent>

// Table 1
</cc:ChartContainerContent>

<cc:ChartContainerContent>

// Table 2
</cc:ChartContainerContent>

BR,

Mahesh

[alain_more · Accepted solution]

Hi Mahesh,

Thank you very much for your answer!

Unfortunately, this doesn't really solve the requirement. By adding each table to its own chartcontainercontent, each table is placed in a separate screen, and I get a toggle that allows me to navigate to each table individually. But they never appear at the same time.

Thanks

[maheshpalavalli · Accepted solution]

As per the documentation that is how it works, that control takes only 1 table/chart.. But can you try using the HBox as the container and put all those tables inside it..?

[alain_more · Accepted solution]

Hi Mahesh,

I'm marking your answer as accepted because by combining both your comments I was able to solve the requirement.

This is how I did the setup, using both a single chartcontainaercontent and a single HBox for all 3 tables.

Thank you so much for your help!

Cheers!

<coms:ChartContainer>
  <coms:ChartContainerContent>
   <coms:content>
    <m:HBox>
      <m:Table>
        ....
      </m:Table>
      <m:Table>
        ....
      </m:Table>
      <m:Table>
        ....
      </m:Table>
    </m:HBox>
   </coms:content>
  </coms:ChartContainerContent>
<coms:ChartContainer>

[maheshpalavalli · Accepted solution]

🙂 great.. Documentation said it supports only table, charts.. I guess it supports any control we throw at it. 😄