In-Portal Issue Tracker

Welcome to the In-Portal Open Source CMS Issue Tracker! This is a central management / tracking tool for all types of tasks / issues / bugs for the In-Portal Project. Before reporting any issues, please make sure to read the Guide into Issue Tracker and How to Properly Test and Report Bugs!
Main | My View | View Issues | Change Log | Roadmap | Docs | Wiki | Repositories
  

View Revisions: Issue #269 [ All Revisions ] [ Back to Issue ]
Summary 0000269: "Form Layout" Configurator for Add/Edit Templates in Admin
Revision 2009-09-04 14:56:23 by alex
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 0000270).

When used, each layout will be directly converted to HTML table inside template. Besides layout, specified inside form declaration (see task 0000270) will help javascript Form class correctly determine location of each field inside layout and resize it respectively.
Revision 2009-09-04 14:06:52 by alex
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 #555555).

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

Main | My View | View Issues | Change Log | Roadmap | Docs | Wiki | Repositories
  

Web Development by Intechnic
In-Portal Open Source CMS
In-Portal Open Source CMS
Copyright © 2000 - 2009 MantisBT Group

Powered by Mantis Bugtracker