How embed a table inside a table

posted on January 17th, 2020

Answered

Chris Anderson asked on January 17, 2020

Hi There,
Our solution, Agileware https://www.agileware.io/ allows businesses to build their own Apps by creating screens and worklists to replace paper and spreadsheets. We do not know what the user will create and so, all of our Lists and Screens are generated dynamically based on what the users create in the drag and drop editors.
We use FlexMonster to aggregate our standard Lists into pivot tables and charts for a real time view of performance.
We're looking at enhancing our own native lists and wondered if there was a way in which FlexMonster could meet our needs.
In the "Flat View" FlexMonster shows the data as our lists typically would in basic sense. However, we wanted to know if it was possible (potentially using the API's) to:

Implement our own UI for a Mobile Responsive view as the current FlexMonster UI isn’t great on mobile, especially for lists but if we could put our own mobile UI in place for Lists which feeds off the FM API then this might work.
Cater for "Repeating Groups" (Please see standard List.docx attached). We have a feature called Repeating Groups which allows users to collect repeating blocks of information against a single screen. We then need to show these in our lists in the form of collapsible groups, against the correct row with the correct headers. We overcome this in the aggregation / charting by using a distinct count where required. My question is, as FM already has collapse and expand features by row, is there potential to use this or again, manipulate UI and use the API’s to achieve a simlar thing
Could we implement buttons into columns to perform an action (i.e. navigate into the data behind the row in another view). Again, you can see examples in the attached word doc on the far left of the list.

Thanks in advance,
Chris

Attachments:
Standard List.docx

5 answers

Public

Vera Didenko ⋅ Flexmonster ⋅ January 20, 2020

Hello, Chris,

Thank you for writing to us.

Please see our answers below:

We would like to explain that it is not possible to completely substitute Flexmonster's UI (the grid) with a custom one and use Flexmonster explicitly as a data provider.
However, it is possible to create custom pop-ups, for example, a custom Fields List, filters, customization pop-ups, etc. and customize Flexmonster's appearance.
Here are several links which may be of help:
1.1) How to customize the appearance.
1.2) How to create a custom Fields List.
1.3) How to create a custom Filter pop-up.
Our team kindly asks if you could please specify why the current Flexmonster UI isn’t great on mobile devices.
We are glad to confirm that it is possible to achieve the desired functionality.
Please see the following JSFiddle examples demonstrating the general idea:
2.1) Opening another pivot from Flexmonster's context menu: https://jsfiddle.net/flexmonster/dbaw72fw/
2.2) Opening another pivot in a pop-up window from Flexmonster's context menu: https://jsfiddle.net/flexmonster/1rm53nt9/
In addition to customizing the context menu for opening another pivot, the cellclick event could be used as well.
Buttons could be added into column cells via the customizeCell() API call.

Please let us know if this helps.

Looking forward to your reply.

Best regards,
Vera

Public

Chris Anderson ⋅ January 20, 2020

Hi Vera,
I'll ask our Dev team to look at the examples, thank you for the detailed explanations!
As for the mobile UI, I've attached some screenshots of the FlexMonster Demo on mobile to show what I mean. I completely appreciate that tables and charts are not ideal for small, mobile screens but I can't see anything which enhances usability on a mobile device. Is there another setting or something which improves UI/UX on a small screen?
Many Thanks
Chris

Attachments:
Screenshot_20200120-185553_Chrome.jpg
Screenshot_20200120-185543_Chrome.jpg

Public

Vera Didenko ⋅ Flexmonster ⋅ January 21, 2020

Hello, Chris,

Thank you for your reply.

Regarding mobile usage:
Please find below a list of best practices for mobile usage optimization:

1) Space on the grid can be saved by hiding the spreadsheet headers (please check out the showHeaders option).
2) It is possible to save space on the grid by changing the column width, row height, font size via CSS. The following example shows how to make row height 20 px instead of 30 px: https://jsfiddle.net/flexmonster/Ldc1vrew/
3) Turn off the options unnecessary for the end-users: it is possible to disable filtering, changing the slice, etc. For more details please check this link.
4) Make sure your website styles allow scrolling for the component containing Flexmonster. For example, overflow-x: hidden would prevent you from right/left scrolling. Please kindly note that if no CSS prevent scrolling, the pop-up windows should be scrollable.
5) If the Field List is used, it is more convenient to unselect fields from columns/rows by double-clicking on their names.

Please let us know if this helps to improve Flexmonster's mobile usage.

Looking forward to your feedback.

Best regards,
Vera

Public

Chris Anderson ⋅ January 23, 2020

Thanks Vera, we'll take a look at the information provided. Much appreciated.

Public

Vera Didenko ⋅ Flexmonster ⋅ January 23, 2020

Hello, Chris,

Thank you for your response.

We will be looking forward to your feedback.

Best regards,
Vera

How embed a table inside a table

5 answers

Please login or Register to Submit Answer