Changes for page Elemente
Change comment:
Renamed back-links.
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. fse1 +XWiki.gru - Content
-
... ... @@ -1,82 +1,70 @@ 1 1 {{content/}} 2 2 3 - Aform consistsof oneormultiplepages.Theuser startsatthefirst page andcannavigateto otherpagesbypressing[[a button.>>doc:Button]]Eachpageitselfcontains multiple form elementsthatcanbe arrangedinny way youlike.3 +The following elements represent all available form and design elements in {{designer case="dat"/}}. Additional JavaScript libraries such as //jQueryUI// or //datepicker// may be employed to enhance the available form elements or add custom functionality. 4 4 5 - Standard form elements are always available in{{formcycle/}}. Additionally youmay create your own [[form templates>>doc:Formcycle.FormDesigner.ElementTemplates]]inthe{{designer/}}. By installing plugin, you can add additionallementsforspecialized purposes. Finally, itisalsopossibleto includeother elements and widget via third-party JavaScript libraries such as//jQuery UI//.5 +{{subpages title="The available form elements" float="none"/}} 6 6 7 - Thefollowingstandard formelementsare currently available:7 +== Positioning elements == 8 8 9 - {{subpagestitle="Standardformelements"float="none"/}}9 +When positioning elements via drag&drop with the {{designer/}}, the position where the element is about to be placed gets highlighted. 10 10 11 -== Positioning elements == 11 +{{figure image="elements_0_en.png" width="300"}} 12 +Placing an element next to another element. 13 +{{/figure}} 12 12 13 -{{figure image=" designer_add_element_de.png"}}14 - Youcanmoveelementsviadrag&dropto whereyou would liketo havehem.15 +{{figure image="elements_1_en.png" width="300"}} 16 +Inserting an element into another element. 15 15 {{/figure}} 16 16 17 - Createnew elementby clickingonaform elementin theelementlist to theleft. Move the element via drag&dropintothe formand totheposition whereyou would liketo placethem. You can also takeanexistingelement in the form and move it to another position.19 +=== Positioning an element before, after, below or above another element === 18 18 19 - ===Place an element inside another element===21 +When you move an element with the mouse, an orange bar will appear next to the closest element. Let go of the mouse to insert the element at this position. 20 20 21 - Someelementssuch as [[containers>>doc:Container]] and [[fieldsets>>doc:Fieldset]] allow you togroupmultiple form elements. To movean element insideacontaineror fieldset, click on the elementand drag it over the container or fieldset.23 +=== Inserting an element into another element === 22 22 23 - ===Moving an elementwithout drag&drop===25 +Elements of type [[page>>doc:Formcycle.FormDesigner.FormElements.Page]], [[fieldset>>doc:Formcycle.FormDesigner.FormElements.Fieldset]], and [[container>>doc:Formcycle.FormDesigner.FormElements.Container]] may contain other form elements. To put an element inside such a container, drag the element over the container and let go of the mouse. 24 24 25 - Whenthere are many elements in a form, dragging an element from the top of the form to the bottom may get cumbersome. To makeiteasier tomove element over a longerdistance, do a doubleclick on the element. Thisactivates the elementmove mode and a small orangeborderappears aroundeach element. Now scroll the form and on thepositionto which you want to move the form.27 +=== Positioning elements without drag & drop === 26 26 27 -I ncaseyoudonotwanttomove the element after,pressescapeorclick onthe elementagain togetout oftheelementmovemode.29 +It may become difficult to position element via drag&drop when there are many elements on a page and you would like to move an element from the top to the bottom. 28 28 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. 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. 31 31 {{/figure}} 32 32 33 33 == Selecting elements == 34 34 35 -=== Single selection ===39 +=== Selecting a single element === 36 36 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. 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 39 39 {{/figure}} 40 40 41 - Toselectan element, click onit with themouse. The elementgets highlighted in orange. You can now edit theproperties of the selectedelementin the propertiespanel to the right.47 +=== Selecting multiple elements === 42 42 43 -=== Multiple selection === 49 +1. Press the shift key and keep holding it down. 50 +2. Click on the elements you would like to select. 44 44 45 -{{figure image=" designer_element_multiselect_en.png"}}46 - Press and hold theshift key to select multiple elements.52 +{{figure image="elements_5_en.png" width="300"}} 53 +Selecting multiple elements 47 47 {{/figure}} 48 48 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 - 54 54 === Selecting parent elements === 55 55 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}} 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. 59 59 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. 60 +{{figure image="elements_6_en.png" width="300"}} 61 +Selecting parent elements 66 66 {{/figure}} 67 67 68 -First, click on an element to select it. Now you can: 69 -Klicken Sie auf ein Element, um es zu markieren. 64 +== Deleting elements == 70 70 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// 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//). 73 73 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. 68 +{{figure image="element_del_0.png" float="none" width="200"}} 69 +The button for deleting elements. 80 80 {{/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.