Changes for page Elemente
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. gru1 +XWiki.fse - Content
-
... ... @@ -1,70 +1,82 @@ 1 1 {{content/}} 2 2 3 - Thefollowing elementsrepresentall availableformand designelementsin {{designercase="dat"/}}.AdditionalJavaScriptlibrariessuch as//jQueryUI//or//datepicker//maybe employedenhance the available form elementsoraddcustomfunctionality.3 +A form consists of one or multiple pages. The user starts at the first page and can navigate to other pages by pressing [[a button.>>doc:Button]] Each page itself contains multiple form elements that can be arranged in any way you like. 4 4 5 - {{subpages title="The available formelements"float="none"/}}5 +Standard form elements are always available in {{formcycle/}}. Additionally you may create your own [[form templates>>doc:Formcycle.FormDesigner.ElementTemplates]] in the {{designer/}}. By installing plugin, you can add additional elements for specialized purposes. Finally, it is also possible to include other elements and widget via third-party JavaScript libraries such as //jQuery UI//. 6 6 7 - ==Positioning elements==7 +The following standard form elements are currently available: 8 8 9 - Whenpositioning elements viarag&drop with the {{designer/}},the position wheretheelementisabouttobeplaced gets highlighted.9 +{{subpages title="Standard form elements" float="none"/}} 10 10 11 -{{figure image="elements_0_en.png" width="300"}} 12 -Placing an element next to another element. 13 -{{/figure}} 11 +== Positioning elements == 14 14 15 -{{figure image="element s_1_en.png"width="300"}}16 - Insertingan element intoanotherment.13 +{{figure image="designer_add_element_de.png"}} 14 +You can move elements via drag&drop to where you would like to have them. 17 17 {{/figure}} 18 18 19 - ===Positioning an elementbefore,after,belowor aboveanother element===17 +Create new element by clicking on a form element in the element list to the left. Move the element via drag&drop into the form and to the position where you would like to place them. You can also take an existing element in the form and move it to another position. 20 20 21 - Whenyou move an elementwith the mouse,anrange bar will appear nextto theclosest element. Let go of the mouse to inserttheelementat this position.19 +=== Place an element inside another element === 22 22 23 - ===Inserting an element intoanotherelement===21 +Some elements such as [[containers>>doc:Container]] and [[fieldsets>>doc:Fieldset]] allow you to group multiple form elements. To move an element inside a container or fieldset, click on the element and drag it over the container or fieldset. 24 24 25 - Elementsof type [[page>>doc:Page]], [[fieldset>>doc:Formcycle.FormDesigner.FormElements.Fieldset]],and[[container>>doc:Formcycle.FormDesigner.FormElements.Container]]may contain other form elements. To putan element inside such a container, dragthe element overthe containerand let go of the mouse.23 +=== Moving an element without drag&drop === 26 26 27 - ===Positioning elementswithout drag&drop===25 +When there are many elements in a form, dragging an element from the top of the form to the bottom may get cumbersome. To make it easier to move element over a longer distance, do a double click on the element. This activates the element move mode and a small orange border appears around each element. Now scroll the form and on the position to which you want to move the form. 28 28 29 -I tmay becomedifficulttopositionelementvia drag&dropwhentherearemany elementsona page andyouwould liketomoveanelementfromthetopto thebottom.27 +In case you do not want to move the element after, press escape or click on the element again to get out of the element move mode. 30 30 31 -Elements may be moved by double clicking on them as well. This will show all positions where the element can be placed. Move the element by clicking on the position where you would like to place it. Click on the element again or press escape when you do not want to move the element. 32 - 33 -{{figure image="elements_3_en.png" width="300"}} 34 -Positioning elements without drag&drop. 29 +{{figure image="designer_mode_move_element.png"}} 30 +Form elements can be moved without drag&drop as well. Just do a double click on the element, then click on the desired new position. 35 35 {{/figure}} 36 36 37 37 == Selecting elements == 38 38 39 -=== S electinga single element ===35 +=== Single selection === 40 40 41 -Click on the element to select it. It will be highlighted in orange. Its properties can be edited via the panels to the right of the {{designer/}}. 42 - 43 -{{figure image="element_4_en.png" width="300"}} 44 -Selecting an element 37 +{{figure image="designer_element_and_properties_en.png"}} 38 +Click on an element to select. You can then change its properties in the panel to the right. 45 45 {{/figure}} 46 46 47 - ===Selectingmultiple elements===41 +To select an element, click on it with the mouse. The element gets highlighted in orange. You can now edit the properties of the selected element in the properties panel to the right. 48 48 49 -1. Press the shift key and keep holding it down. 50 -2. Click on the elements you would like to select. 43 +=== Multiple selection === 51 51 52 -{{figure image="elements_ 5_en.png"width="300"}}53 - Selectingmultiple elements45 +{{figure image="designer_element_multiselect_en.png"}} 46 +Press and hold the shift key to select multiple elements. 54 54 {{/figure}} 55 55 49 +1. Press the shift key and keep holding it down. 50 +1. Click on the elements you want to select. 51 + 52 +All properties the seleected elements have got in common can edited at once in the properties panel to the right. If you change any property, it gets applied to all selected elements. 53 + 56 56 === Selecting parent elements === 57 57 58 -Some elements such as pages or fieldsets may contain other form elements. Parent elements can sometimes be difficult to select when there are many elements on a page. When an element is selected, all parent elements are shown in the bar to the top of the {{designer/}} and can be selected by clicking on them. 56 +{{figure image="designer_element_and_hierarchy_en.png"}} 57 +The navigation bar to the bottom left lets you see all parent elements. 58 +{{/figure}} 59 59 60 -{{figure image="elements_6_en.png" width="300"}} 61 -Selecting parent elements 60 +When you select an element, you can see that element and all its parent elements in the navigation bar to the bottom left of the {{designer/}}. By clicking on any of those elemnts you can select them as well. This is especially helpful to select elements just as [[pages>>doc:Formcycle.FormDesigner.FormElements.Page]] or [[containers>>doc:Formcycle.FormDesigner.FormElements.Container]]. 61 + 62 +== Copying and deleting elements == 63 + 64 +{{figure image="designer_element_context_menu_en.png"}} 65 +Do a right click on an element to open the context menu with various actions. 62 62 {{/figure}} 63 63 64 -== Deleting elements == 68 +First, click on an element to select it. Now you can: 69 +Klicken Sie auf ein Element, um es zu markieren. 65 65 66 -To delete elements, click on the trash icon to the top left part of the {{designer/}} or click on the element with the right mouse button and click on the //delete elements//. You can also delete an element by selecting it and pressing the delete key (//del//). 71 +* delete the element by pressing delete key (//del//). This works even if multiple elements are selected. 72 +* copy the element by pressing //ctrl+c// and paste it by pressing //ctrl+v// 67 67 68 -{{figure image="element_del_0.png" float="none" width="200"}} 69 -The button for deleting elements. 74 +Alternatively, you can copy and delete element too by doing a right click on the element and selecting the corresponding action from the context menu. 75 +{{id name="transform_elements" /}} 76 +== Transform form elements {{version major="6" minor="3" patch="0"/}} 77 + 78 +{{figure image="designer_element_transform_en.png"}} 79 +By clicking on the element type selection a searchable list with possible target element types appears. 70 70 {{/figure}} 81 + 82 +Starting with {{formcycle/}} version 6.3.0 it is possible to transform existing elements in the form into other element types. While [[containers>>doc:Container]] and [[fieldsets>>doc:Fieldset]] can only be transformed into the respective other element type, all other element types can be transformed into any other type, but not into containers and fieldsets.