Uploaded image for project: 'In-Portal CMS'
  1. In-Portal CMS
  2. INP-225

"Form Layout" Configurator for Add/Edit Templates in Admin

    XMLWordPrintable

    Details

    • Type: Feature Request
    • Status: New
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 5.1.0
    • Fix Version/s: None
    • Component/s: Admin Interfaces
    • Labels:
      None

      Description

      Most of data editing templates in administrative console have one column layout, this means, that fields on such forms are placed one under another by one field in a row. This suits for most of the forms, but when it comes to forms that required more fields to be placed on standard size (e.g. 1024x768) form, then not easy to achieve. Currently we can create table with required layout and place fields into it, but form field automatic resizing will not work, because it assumes, that all fields are placed into one column and resized them accordingly.

      Idea is to add new unit config option named "FormLayouts", that will be collected from all unit configs into single placed and then used where requested. Mentioned above option will be associative array, where key is layout name, but value is array, that represents layout. It will be better understandable using example below:

      $config = Array (
      	'FormLayouts' => Array (
      		'SingleColumn' => Array (
      			Array (
      				'attributes' => Array ('id' => 'sample_id', 'class' => 'sample-class another-class'),
      				'cells' => Array (
      					'cell_one' => Array ('id' => 'cell_id', 'style' => 'width: 100%; background-color: red;'),
      				)
      			),
      		),
      		
      		'TwoColumns' => Array (
      			Array (
      				'attributes' => Array ('id' => 'sample_id', 'class' => 'sample-class another-class'),
      				'cells' => Array (
      					'cell_one' => Array ('id' => 'cell_id', 'style' => 'width: 50%; background-color: red;'),
      					'cell_two' => Array ('style' => 'width: 50%; background-color: green;'),
      				)
      			),
      		),
      		
      		'MixedColumns' => Array (
      			Array (
      				'attributes' => Array ('id' => 'sample_id', 'class' => 'sample-class another-class'),
      				'cells' => Array (
      					'cell_one' => Array ('id' => 'cell_id', 'style' => 'width: 50%; background-color: red;'),
      					'cell_two' => Array ('style' => 'width: 50%; background-color: green;'),
      				)
      			),
      			Array (
      				'attributes' => Array ('id' => 'other_id', 'class' => 'sample-class another-class'),
      				'cells' => Array (
      					'cell_three' => Array ('colspan' => 2, 'style' => 'width: 100%; background-color: red;'),
      				)
      			),
      		),
      	),
      
      );
      

      In example above there are defined 3 layouts: SingleColumn, TwoColumns and MixedColumns. Each layout except of MixedColumns have 1 row (it's record count on 1st level of layout declaration). Each consists of two more arrays: attributes (row HTML attributes, optional) and cells (cells inside given row, required). It's required, that each row must consist of at least one cell. Each cell has it's name (e.g. cell_one, cell_three), that must be unique inside given layout. This cell name will be used to place form fields inside that cell later when form will be defined, that uses given layout (see task INP-226).

      When used, each layout will be directly converted to HTML table inside template. Besides layout, specified inside form declaration (see task INP-226) will help javascript Form class correctly determine location of each field inside layout and resize it respectively.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                alex Alex
              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated: