How can i display records from a table from left to right and then below?

Question

Hi all,

offcourse i also enjoyed the video of PRO-STORE's rebuilt Forms application.

Would they be so kind to tell me HOW they show the favorites on the welcome screen?

I presume the favorites have been stored in a table. But how does the formspider panel / grid look like to show these records from left to right and then scroll to the next line? I have only seen grids with columns so "normally" the favorites would be shown in a table.

I thought "perhaps they use a view" to transform the records into columns+records, but in my case the width of the screen is not static, so on a wide screen perhaps 10 buttons can be show, but on a small screen only 2 or so.

Also, is it possible to show me how the styling of the buttons has been done?

Kind regards,

Jan Willem Vermeer

Answer 1

0

Hi,

i have figured out one solution by myself: 1) create a function that selects the records and formats them with html so they can scroll in an area 2) create a datasource that calls the function.

So the formatting of the tiles is done outside of Formspider.

If anybody has a better solution, please let me know.

Kind regards,

Jan Willem Vermeer

link

answered 08 Sep '15, 08:48

Jan Willem V...
113●1●2●27
accept rate: 0%

I think TEAM has an implementation which is inside Formspider. I suggest you to study the tableLayout API's. TableLayout API's enable developers to create rows and cells in the layout during runtime and add panels into these cells.

This way you can show and hide buttons (which are inside the panels) on the screen.

(08 Sep '15, 08:53) Yalim Gerger ♦♦

Answer 2

Hi Jan,

sorry for my late response. But maybe it’s not to late...

We are using CSS to style buttons that they are looking like the tiles you have seen in the video. Therefore we created some new Tile Style Classes, one general and a lot of specific ones to change the background color and the icon in the middle:

.tile, .tile_small, .tile_large { background-image: none !important; border: 3px solid transparent !important; border-radius: 0 !important; color: white !important; cursor: pointer !important; float: left !important; font-family: font_normal !important; font-style: normal !important; font-weight: normal !important; margin: 0 10px 10px 0 !important; outline: medium none !important; overflow: hidden !important; padding: 0 !important; position: relative !important; vertical-align: middle !important; } .tile .bdf-button-icon, .tile_small .bdf-button-icon, .tile_large .bdf-button-icon { background-position: center center !important; background-size: 100% auto !important; height: 64px !important; left: 50% !important; line-height: 64px !important; margin-left: -28px !important; margin-top: -28px !important; position: absolute !important; top: 40% !important; width: 64px !important; } .tile .bdf-button-label, .tile_small .bdf-button-label, .tile_large .bdf-button-label { background: transparent none repeat scroll 0 0 !important; bottom: 0 !important; color: white !important; display: block !important; left: 0 !important; margin: 5px 20px 2px 5px !important; min-height: 29px !important; position: absolute !important; right: 0 !important; text-align: left !important; white-space: pre !important; } .tile.bdf-button-over, .bdf-button-over.tile_small, .bdf-button-over.tile_large { border-color: #5087c2 !important; } .tile.bdf-button-clicked, .bdf-button-clicked.tile_small, .bdf-button-clicked.tile_large { border-color: #5087c2 !important; } .tile_small { height: 120px !important; width: 120px !important; } .tile_small .bdf-button-label { font-size: 12px !important; } .tile_large { height: 250px !important; width: 250px !important; } .tile_large .bdf-button-icon { height: 128px !important; left: 90px !important; top: 70px !important; width: 128px !important; } .tile_large .bdf-button-label { font-size: 18px !important; } .tile_gr { background-color: #77b900 !important; } .tile_gr .bdf-button-icon { background-image: url("../images/tile_forklift_64.png") !important; }

We are creating or better recreating the start page panel with the tiles during runtime using new BDF functions that are now available in FS 1.9. (bdf_runtime_api.setPanelXML).

You have to define a Table Layout Panel with a maximum button matrix like e.g. 6x6 Buttons in the FormspiderIDE. Each button must fit a naming convention so that you can address the button by name (e.g. button_x_y).

In the initialisation function of the panel (e.g. after Login) you have to build up the panel XML looping over all defined favourite rows of the user. But if you want to add actions to the buttons it is important that all components are defined before and mapped to an action, otherwise Formspider can not identify an action. You can add one and the same action to all buttons and check in the procedure which button was pressed. Additionally you can store some more information to the button, for example the dialog name in the label. So if the button is pressed you can add a tab with the label-value as panel name to the main tabbed panel.

Creating a panel like this is unfortunately not that flexible as it might look like. The maximum size of the shown favourites is fix, you have to create a new panel during design time if you want to show more. It is as well challenging if you want to be flexible in the size like you mentioned using large or smaller screens.

If you have more questions feel free to ask. I try to manage to answer as fast as possible.

Best Regards,

Michael

Answer 3

Hi Michael,

many thanks for this explanation !

It is not too late, but i am afraid that the solution is not flexible enough. My users will use the application on desktops, laptops and tablets, so the tiles should adjust to the screen size.

In html/css it is easy to build such responsive layout with tiles that are all clickable to address URL's. If only it was possible to invoke an event with a URL... I guess you have tried that. For example with one row and one cell and put all clickable buttons in that cell.

I have to think about what to do now. It is more complex that i expected.

Kind regards, Jan Willem

Answer 4

Hi,

i was looking at the panel example. In that example hyperlinks are used this way:

  <cell>
    <hyperLink font-color="Blue" font-size="12" label="Simple Panel" >
      <events>
        <click action="showSimplePanel"/>
      </events>
    </hyperLink>
  </cell>

It appears that one cell can only contain one hyperlink and cells are always treated like table-cells.

Is there something similar in DIV format? If so, the problem is solved, because DIV's can scroll responsive next and below each other.

Kind regards, Jan Willem

Answer 5

Hi Jan,

I could not get your question correctly. But I have a menu setup where it displays favorite, recently opened etc. on the left side of my main screen. However, I am not able to paste it here because I am not authorized. The error message display: Sorry, file upload requires karma > 60. Though, I am karma 91 the message is displayed and I am refused file upload.

If you mean menu, I have stored all my menu items on tables. And the menu is displayed in a grid based on the user login. Further, the user has facility to add a menu item to his favorite table. Further, the form he last opened will automatically be inserted into his recently opened list. This enables the user easy access to menu items.

Regards,

George.

How can i display records from a table from left to right and then below?

Follow this question

Related questions