Skip to Content

Version 14.1 by Andy Tripp on 2020/06/10
Show last authors
1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
4
5 This tutorial will show you how to build a Contact Manager application.  It's very similar to the [[Documentation.DevGuide.Tutorials.FAQTutorial.FAQTutorialManual]] tutorial. The only difference (so far) is that the FAQ tutorial involves a very trivial object: a FAQ object contains just two things: a "question" and an "answer", while this example uses a Person object that has more properties ("name", "age", "sex", etc.) .This is a very simple application that makes use of XWiki's [[classes, properties, and objects>>platform:DevGuide.DataModel||anchor="HXWikiClasses2CObjects2CandProperties"]]. It also uses a technique that you may frequently use as the basis for several different kinds of applications.
6
7 Also, this tutorial explains things a little differently than the FAQ tutorial. If something here doesn't make sense to you, try going through the FAQ tutorial and maybe it will make more sense.
8
9 = Prerequisites for following the tutorial =
10
11 You should have [[installed XWiki>>platform:AdminGuide.Installation]] and have a [[basic understanding of how to use it>>platform:Features.WebHome]].
12
13 All through this tutorial you should refer to the [[XWiki Data Model>>platform:DevGuide.DataModel]] for information on XWiki's data model. You might also use the [[XWiki Scripting Guide>>platform:DevGuide.Scripting]] to get you started with scripting in XWiki and manipulating XWiki objects. In addition, this tutorial will introduce the concepts of Authoring Templates and Page Design Sheets, patterns that you will find particularly useful in creating XWiki applications. Completing this tutorial is a recommended prerequisite for anyone who wants to build custom applications on the XWiki engine. And by "custom application", we mean a huge variety of web applications.
14
15 {{warning}}
16 Make sure that your user is an [[Advanced user>>platform:Features.PageEditing||anchor="HAdvancedMode"]] before following this tutorial since you'll need for example to use the wiki editor (##Wiki > Edit## menu).
17 {{/warning}}
18
19 = Application Overview =
20
21 The Person Manager application will allow users to create a "Person object" by entering data (name, age, sex, etc) into a simple form and then submitting the form. Let's sketch out what roughly what those two pages should look like on a "napkin", using [[Balsamiq>>https://balsamiq.com/]]:
22
23 image:personDialog.PNG
24
25 Our page won't look exactly like that, but the point is that a website user can create a Person by filling out a "form" page like this.
26
27 Note all the various types of "widgets" shown here:
28
29 * "name" is a single-line text field
30 * "email" is also a single-line text field, but we'd like it to be validated (e.g. give an error if it doesn't have a "@" in it)
31 * "address" is a multi-line text field
32 * "phone" is a single-line text field (perhaps some validation here, too)
33 * "sex" is a drop-down list
34 * "married" is a checkbox: the only allowed values are "true" and "false"
35 * "image" is actually the name of some image file, but we actually display the image itself. Nice!
36 * "age" is Number field, which looks like a single-line text field, but has validation.
37 * "related people" is one more more links to other web pages. Very nice!
38
39 The Person then appears in a table with all other Person objects that have been previously created. Users can click on the Person in the table to see all the information about the Person. He may also edit that information or delete the Person. The table might look something like this:
40
41 image:personTable.PNG
42
43 When the user clicks on a row in the table, he will get a page that shows the information about the Person, which will look similar to the "Create Person" page, but without the ability to change anything.
44
45 == Objects Overview And Terminology ==
46
47 Next, let's summarize the terminology for "Objects". For full details, see [[Data Model>>https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/DataModel/#HXWikiClasses2CObjects2CandProperties]]. There is nothing fancy happening here, but it's important to get our terminology straight.
48
49 A Person is an example of some "Object" or "class". We will use XWiki to define what "properties" are in a "Person" object. For example, we will say that there's a property called "name" of type "String". There's also a property called "age" of type "Number", and an "address" property that's type "TextArea" (a string that can be multiple lines).
50
51 When a user creates a new Person, we call that an "instance" of the "class". So we might say something like "I've created an instance of the Person class, with name 'Joe Smith'". And we would say that our table shows all the instances of the Person class. And instances can not only be created, but also edited or deleted.
52
53 We, the creators of the website, define the "Person" class. We define that once, and we're done. Our users use our website to create, edit, and delete instances of our Person class.
54
55 == Overview Of What We Will Do ==
56
57 In this tutorial, we'll do the following steps:
58
59 * Define our Person class, using the XWiki "Data Types" page.
60 * Specify the properties of our Person class, using the XWiki "Class Editor" page.
61 * Define how a Person instance should be displayed, by creating a "Person Sheet" page.
62 * Create a Template and a Template Provider (whatever they are) for our Person class.
63 * Create a web page that displays a table of people.
64 * Create a web page that displays a Person instance.
65
66 Note that we don't need to define a page for creating or editing a Person, just a page for *displaying* a Person. XWiki will automatically do that for us!
67
68 Once we are done with these steps, our application will be finished. A user of our website can see a page containing the table of Person objects, view the page for an existing person, add a new Person, edit an existing Person, or delete a Person.
69
70 = Go to the Special "Data Types" Page =
71
72 The "Data Types" page is a special XWiki page that lets us define classes like "Person". It'sactually hidden by default. To be "unhide" it, go to your profile page, select the Preferences tab, edit the page and choose to view Hidden Documents.
73
74 To find the "Data Types" page, enter a search query for the keyword "D". This should return a document titled "Data Types".
75
76 = Create the Person Class =
77
78 * On the "Data Types" page, under the heading "Create a new data type", in the "Title" field, enter ##Person## as the name of the page to create:(((
79 {{image reference="personClass.PNG"/}}
80 )))
81 * As you can see in the Breadcrumb below the new page will be created at location ##XWiki > Person##. In practice the "Data Types" page will automatically prefix the page name with ##Class## (you could also enter ##PersonClass## as the page name directly).
82 * Now it would be nice to have it created in a new location such as ##PersonSpace > Person Class##. Since the ##PersonSpace## parent doesn't exist we cannot use the Tree picker button. Thus click the Pencil button as shown in the following image and replace ##XWiki## by ##PersonSpace##.(((
83 {{image reference="personLocation.PNG"/}}
84 )))
85 * In technical terms you're creating a page named ##PersonClass## (with a title of "Person Class") located in a space also called ##PersonSpace## and thus the technical reference is ##PersonSpace.PersonClass##.
86 * Click the "Create this Class" button. You should then see a page with the following content:(((
87 {{code language="none"}}
88 {{velocity}}
89 ## Replace the default space with the space where you want your documents to be created.
90 ## Replace the default parent with the one of your choice and save the document.
91 ##
92 #set($defaultSpace = $doc.space)
93 #set($defaultParent = $doc.fullName)
94 {{/velocity}}
95 {{/code}}
96 )))
97
98 In the code, change the word "$doc.space" with the name of the space where you want your pages to be created: "PersonSpace".
99 The line of code should look like this:
100
101 {{code language="none"}}
102 #set($defaultSpace = 'PersonSpace')
103 {{/code}}
104
105 You can also change the default parent of the new FAQ documents that are going to be created. To do so, replace the "$defaultParent" variable with the name of your document.
106 The line of code should look like this:
107
108 {{code language="none"}}
109 #set($defaultParent = 'PersonSpace.WebHome')
110 {{/code}}
111
112 Click the "Save & View" button. The class is now created and you should be looking at a page titled "Class: Person" that looks like this:
113
114 {{image reference="newPersonClass.PNG"/}}
115
116 = Add Properties to the Class =
117
118 Under the page title, you should see the words "The class does not have any properties yet. You can use the //__class editor__// to define them." Let's just follow those instructions!
119
120 * Click on the 'class editor' link
121 * Note that the link trail in the header is something like "Wiki Home / PersonSpace / Person Class". This shows you that you are indeed on the Person class page in Class edit mode.
122
123 Now, we need to specify all the properties of a Person. Let's have the following properties:
124
125 |=Property Name|=Property Type
126 |name|String
127 |email|EMail
128 |address|TextArea
129 |phone|String
130 |sex|static list
131 |married|Boolean
132 |image|Image
133 |age|Number
134 |relatedPeople|Page (Multiple)
135
136 * Enter the text //name// in the "name" field
137 * Choose "String" for the type of the property and then click on "Add". By using a String type, when a user goes to enter the //name// of a new Person, he will be prompted with a single-line text field.(((
138 {{image reference="name.PNG"/}}
139 )))
140 * Click on the "+" icon to expand the options for the newly created property
141 * Change the value of the "Pretty Name" field to "Name"(capital N). With this done, the user sees the label "Name" rather than "name" when prompted for the name of a Person. This doesn't make a huge difference for this property, but when it comes to the property with the name "relatedPeople", it's nice to show the user something a little more friendy like "Related People". Also, you could later decide to change that label to "Similar People" without actually renaming the property (and thereby probably breaking something).
142 * Now repeat this to add each of the properties shown in the table above.
143 ** Note that the "EMail" type is like a String, except that it has a "Validation Expression" (e.g. to make sure it has an "@" character).
144 ** If we wanted to, we could add a "Validation Expression" to the "phone" property to make sure it's in a particular format.
145 ** For the "sex" property, in the "Display Type" field, enter "Select". This will give the user a drop-down menu.
146 ** As we define the "sex" property as type "static list", we specify the values for the field like this:(((
147 {{image reference="staticList.PNG"/}}
148 )))
149 ** Note that there is no "Image" type. That's unfortunate. Let's just define it as a String here, and deal with that later.
150 ** Note that the "size" of our "age" field is 30 digits. Three digits should be plenty, so feel free to change that.
151 ** For our "relatedPeople" property, we want to allow multiple values, not just one. So find the "Multi Select" checkbox and check it.
152 * When you are done, you should see all your properties like this:(((
153 {{image reference="properties.PNG"/}}
154 )))
155 * When you are done adding and configuring the properties, click the "Save & View" button
156
157 = Create the Page Design Sheet =
158
159 * After the previous step you are now on the FAQClass page which should look like this:(((
160 {{image reference="personClass2.PNG"/}}
161 )))
162 * Click the first button ("Create the document sheet") to create the document sheet (the Page Design Sheet). This sheet determines how your page's objects will be rendered to the user. The document is automatically created.
163 * You should see a warning message with the text "The sheet is not bound to the class so it won't be applied automatically when a page that has an object of this class is displayed". Click the "Bind the sheet to the class" link that appears after the text. **What this does is important**:
164 ** It adds an object of type ##XWiki.ClassSheetBinding## to the ##FAQ.FAQClass" document. Basically it ties the FAQ Class to the Sheet.##
165 ** **It's because of this object that users will be sent to form edition mode when editing FAQ entries**
166 * Now click on "View the sheet document". This takes you to the ##FAQ.FAQSheet## page which you can edit in wiki mode and see its default content:(((
167 {{code language="none"}}
168 {{velocity}}
169 ## You can modify this page to customize the presentation of your object.
170 ## At first you should keep the default presentation and just save the document.
171
172 ## We have to use wiki=true because $doc.display() can produce wiki syntax.
173 {{html wiki="true" clean="false"}}
174 ## Load the JavaScript code required to make the object properties editable in-place.
175 #set ($discard = $xwiki.jsfx.use('uicomponents/edit/editableProperty.js', {
176   'forceSkinAction': true,
177   'language': $xcontext.locale
178 }))
179 #set ($editing = $xcontext.action == 'edit')
180 ## The object to display.
181 #set ($xobject = $doc.getObject('FAQ.FAQClass'))
182 ## The class that describes the object properties.
183 #set ($xclass = $xobject.xWikiClass)
184 ## Make sure the following display* method calls use the right object.
185 #set ($discard = $doc.use($xobject))
186 ## Using the xform vertical form layout.
187 <div class="xform">
188   <dl>
189   #foreach ($property in $xclass.properties)
190     <dt #if (!$editing && $hasEdit)
191         class="editableProperty"
192         #set ($xobjectPropertyReference = $xobject.getProperty($property.name).reference)
193         data-property="$escapetool.xml($services.model.serialize($xobjectPropertyReference))"
194         data-property-type="object"#end>
195       ## This must match the id generated by the $doc.display() method below.
196       #set ($propertyId = "${xclass.name}_${xobject.number}_$property.name")
197       <label#if ($editing) for="$escapetool.xml($propertyId)"#end>
198         $escapetool.xml($property.translatedPrettyName)
199       </label>
200       ## Support for specifying a translation key as hint in the property definition.
201       <span class="xHint">$!escapetool.xml($services.localization.render($property.hint))</span>
202     </dt>
203     <dd>$doc.display($property.name)</dd>
204   #end
205   #if (!$xclass.properties || $xclass.properties.size() == 0)
206     ## Keep the empty definition term in order to have valid HTML.
207     <dt></dt>
208     <dd>$escapetool.xml($services.localization.render('xclass.defaultObjectSheet.noProperties'))</dd>
209   #end
210   </dl>
211 </div>
212 {{/html}}
213 {{/velocity}}
214 {{/code}}
215
216 Let's take a moment now and analyze this code:
217
218 * first, it loads the JavaScript required for in-place editing
219 * then it retrieves the FAQ object from the current page and the FAQ class defintion
220 * then it iterates through all the FAQ class properties displaying:
221 ** the translated pretty name
222 ** the translated hint
223 ** the value from the FAQ object in view mode, or the form field used to input or modify the value in edit mode
224 * it uses a definition list to display the FAQ object, following the [[Vertical Form>>xwiki:Documentation.DevGuide.FrontendResources.VerticalForms.WebHome]] layout
225
226 As we mentioned, XWiki provides a mechanism that helps us create sheets used for both view and edit mode. This is the ##display## function used in the line:
227
228 {{code language="none"}}
229 <dd>$doc.display($property.name)</dd>
230 {{/code}}
231
232 It detects the current mode (edit or view) and displays the property referenced by its argument as the mode dictates:
233
234 * in view mode it will display the value of the property
235 * in edit mode it will display a form field that will allow the user to edit it
236
237 This way we can use a single Design Sheet to both display and edit our FAQ entries. See the [[XWiki API reference>>platform:DevGuide.API]] and [[XWiki Scripting>>platform:DevGuide.Scripting]] pages for more details about this.
238 )))
239 * Click "Save & View"
240
241 = Create the Authoring Template =
242
243 * Navigate back to the ##FAQ.FAQClass## document (you can use the arrows in the breadcrumb to do so). The document should look like this:(((
244 {{image reference="FAQClass3.PNG"/}}
245 )))
246 * Click on the "Create the document template" button. The Authoring Template will be automatically created.
247
248 Note that earlier, we changed the space name preceding the page name because we wanted all of our FAQ pages to reside in a space named FAQ. Remember that all our documents will be copies of the Authoring Template used as a prototype so the content will be copied in all our FAQs documents and will execute the Design Sheet code in the context of the current document. See the [[dedicated page>>platform:DevGuide.IncludeInVelocity]] for more information regarding this technique.
249
250 Now we need to associate the prototype object with this document to turn it into a true authoring template:
251
252 * If you're on the template page, navigate back to the ##FAQ.FAQClass## document.
253 * At the bottom of the page, look for the following warning message: "The template does not contain an object of type FAQClass. Add a FAQ object to the template »."
254 * Click on "Add a FAQ object to the template »":(((
255 {{image reference="FAQObject.png"/}}
256 )))
257
258 Next, we want to remove the title for the newly created template:
259
260 * Navigate to the ##FAQ.FAQTemplate## document (you can click on the "View the template page (FAQ / FAQ Template)" link for doing that for example.
261 * Edit this document in Wiki mode
262 * Inside the Title field you have "FAQ Template" written -> delete this text
263 * Save & View
264
265 This step is needed so that all of our future entries don't have "FAQ Template" as their title.
266
267 Congratulations: you just created an Authoring Template! You're almost done now.
268
269 {{image reference="FAQClass4.PNG"/}}
270
271 = Create the Template Provider =
272
273 After the template was created and the object was added, a new section appears with a button to create a template provider to use the existing template.
274 The template provider is created with some default values, but those can be updated to match the needs.
275
276 {{gallery}}
277 image:3-missingTemplateProvider.png
278 image:4-addedTemplateProvider.png
279 image:5-templateProviderView.png
280 {{/gallery}}
281
282
283
284 = Create a home page for the FAQ application =
285
286 You want your users to be able to see a list of all existing questions and answers and to add new questions. The best way to do this is to put the FAQ application in its own space and to use that space's homepage to display existing questions.
287
288 Thus we now need to create the ##FAQ.WebHome## page
289
290 * Click on "FAQ" in the breadcrumb to navigate to ##FAQ.WebHome## and notice that the page doesn't exist.
291 * Edit it in wiki mode
292 * Type in the title "FAQs"
293
294 == Displaying existing FAQ entries ==
295
296 You have 2 options when it comes to displaying existing FAQ entries:
297
298 1. Use the livetable component
299 1. Write custom code in order to display them
300
301 === Using the Livetable component ===
302
303 In this section, we will show how to use the [[Livetable Macro>>extensions:Extension.Livetable Macro]] to display the existing questions and answers.
304
305 The livetable component will give users the ability to easily list and filter through existing FAQ documents. The macro is made of 3 parts:
306
307 * The list of columns: for each entry, we will display the question, the date when it was created and a special column that lets users quickly modify entries
308 * The properties of each column: for each column, we will define how it should be displayed, whether it should link to the entry and whether it should be filterable
309 * The livetable options: those are options related to the display of the livetable (in this case we will to display a tag cloud and 10 rows by default)
310
311 Here is the resulting code:
312
313 {{code language="none"}}
314 {{velocity}}
315 #set($columns = ["question", "doc.creationDate", "_actions"])
316 #set($columnsProperties = {
317     "question" : { "type" : "text", "link" : "view", "html" : "true", "sortable":true },
318     "_actions" : {"actions": ["edit","delete"]}
319 })
320 #set($options = {
321    "className":"FAQ.FAQClass",
322    "translationPrefix" : "faq.",
323    "tagCloud" : true,
324    "rowCount": 10
325 })
326 #livetable("faq" $columns $columnsProperties $options)
327 {{/velocity}}
328 {{/code}}
329
330 * Copy this code and paste it as Wiki content (inside ##FAQ.WebHome##)
331 * Click "Save and View"
332 * New FAQ entries will now be displayed on the page once you create them
333
334 The ##FAQ.WebHome## page should look similar to this:
335
336 {{image reference="FAQsLivetable.png"/}}
337
338 Notice how there are some translation keys displayed inside the livetable. Let's create a translations document and change those keys to actual text:
339
340 * Create a new page inside the FAQ space called Translations, i.e. at ##FAQ.Translations## (using the "+" button)
341 * Edit it in Wiki mode and paste this content inside:(((
342 {{code language="none"}}
343 faq.question=Question
344 faq.doc.creationDate=Creation Date
345 faq._actions=Actions
346 {{/code}}
347 )))
348 * Click "Save & View"
349 * Edit it again in Object mode and add a new ##XWiki.TranslationDocumentClass## object to mark the page as a page containing translations. Make sure to select the right scope. Using "Global" means the translations would be visible to all wikis (and it requires having Programming Rights!) and "Wiki" means it's visible to the current wiki only. Choose "Wiki" as the scope.
350 * Click "Save & View" again
351
352 Now the ##FAQ.WebHome## page should look like this (notice the translations instead of the keys):
353
354 {{image reference="FAQsLivetableWithTranslations.png"/}}
355
356 === Using custom code ===
357
358 You will need to write the following code:
359
360 * A XWQL query that will find all your FAQ documents. Check the [[Query API documentation>>extensions:Extension.Query Module]] to know more about it.
361 ** The XWQL query looks for all documents that have a ##FAQ.FAQClass## object other than the template
362 ** If no document has been created yet, a warning message is displayed
363 * A piece of velocity code to display all those documents
364 ** The velocity code loops in that list
365 ** For each item, the full document is loaded in memory so that values can be retrieved from it
366 ** For each document, the question is retrieved and displayed as a link towards the FAQ entry
367
368 Here is the resulting code:
369
370 {{code language="none"}}
371 = Existing FAQ entries =
372
373 {{velocity}}
374 #set($xwql = "from doc.object(FAQ.FAQClass) as faq where doc.fullName <> 'FAQ.FAQTemplate'")
375 #set($results = $services.query.xwql($xwql).execute())
376 #if($results.empty)
377   No FAQ has been created yet!
378 #else
379   #foreach ($item in $results)
380     #set($faq = $xwiki.getDocument($item))
381     * [[${faq.display("question").replace("<p>", "").replace("</p>", "")}>>${item}]]
382   #end
383 #end
384 {{/velocity}}
385 {{/code}}
386
387 * Copy this code and paste it as Wiki content inside ##FAQ.WebHome##
388 * Click "Save and View"
389 * New FAQ entries will now be displayed on the page once you create them
390
391 The ##FAQ.WebHome## page should look similar to this:
392
393 {{image reference="FAQsCustomCode.png"/}}
394
395 == Creating new FAQ entries ==
396
397 There are 2 ways for you to let your users create new FAQ entries:
398
399 1. Declare the FAQ as a template
400 1. Add a custom creation form
401
402 === Using a Template ===
403
404 You will have to define a template provider [[as explained on this page>>extensions:Extension.Administration Application||anchor="HCreatethetemplateprovider"]]
405
406 Go to your wiki's administration interface, in the "Templates" section (Administration -> Content -> Templates). Create a new template provider in the
407 ##FAQ## space and name it ##FAQTemplateProvider##
408
409 You can then use the following values:
410
411 * Provider name: ##FAQ Template Provider##
412 * Template name: ##New FAQ entry##
413 * Template to use: ##FAQ.FAQTemplate##
414
415 If you'd like, you can restrict FAQ entries so that they're created only in the ##FAQ## space. Once you're done, click "Save & View". Your template is now ready to be used! Users who click on the "Add >> Page" button will now have the option to create a new page using the FAQ template.
416
417 === Custom creation form ===
418
419 If you choose this option, you will need to write some code to let your users create new FAQ entries. To do this, you will have to create a form in which the user can enter the name of the questions she wants to create. Once typed in, the form calls the same page to trigger the new document creation based on the parameters entered by the user:
420
421 * The first part of the code checks whether the page has a parameter. If so:
422 ** The name of the document that will be created is computed
423 ** A check is done to verify the document doesn't exist yet
424 ** If everything's ok, the user is sent to the new document in inline edition mode
425 * The second part of the code is the actual FAQ creation form
426 ** It builds the name of the document to create it in the ##FAQ## space
427 ** It sets the document parent as being the current document
428 ** It defines the template to use to create the new document
429
430 {{code language="none"}}
431 {{velocity}}
432 #if("$!request.docName" != '')
433   ## Request for creating a new instance
434   #set($docName = ${request.docName})
435   #set($targetDocName = "${request.spaceName}.${docName}")
436   #if(!$xwiki.exists($targetDocName) && $xwiki.hasAccessLevel('edit', $xcontext.user, $targetDocName))
437     $response.sendRedirect($xwiki.getURL($targetDocName, 'inline', "template=${escapetool.url($request.template)}&parent=${escapetool.url($request.parent)}"))
438     ## Stop processing, since we already sent a redirect.
439     #stop
440   #end
441 #end
442
443 = Add a new question =
444
445 #if("$!targetDocName" != '' && $xwiki.exists($targetDocName))
446   {{warning}}The target document already exists. Please choose a different name, or [[view the existing document>>$targetDocName]]{{/warning}}
447 #elseif("$!targetDocName" != '')
448   {{warning}}You don't have permission to create that document{{/warning}}
449 #end
450
451 {{html}}
452   <form action="" id="newdoc" method="post">
453     <div>
454       <input type="hidden" name="parent" value="${doc.fullName}"/>
455       <input type="hidden" name="template" value="FAQ.FAQTemplate"/>
456       <input type="hidden" name="sheet" value="1"/>
457       <input type="hidden" name="spaceName" value="FAQ"/>
458       Document: <input type="text" name="docName" value="Enter your question here" class="withTip" size="50"/>
459       <span class="buttonwrapper"><input type="submit" value="Create this FAQ" class="button"/></span>
460     </div>
461   </form>
462 {{/html}}
463 {{/velocity}}
464 {{/code}}
465
466 * Copy this code and paste it as Wiki content inside ##FAQ.WebHome##, below the code that's already there
467 * Click "Save and View"
468 * A form to create new FAQ entries is now available on the page:(((
469 {{image reference="FAQsWithForm.png"/}}
470 )))
471
472 = Test the Application =
473
474 Now let's just create a new document in our application to test it out.
475
476 If you previously chose to use a "Custom creation form" for creating new FAQ entries, follow these steps:
477
478 * Go to ##FAQ.WebHome##
479 * Below the "Add a new question" header, enter a question (which will also be used as the document title) in the //Document// field
480 * Click //Create this FAQ//
481 * You can then enter your question in longer form using the //Question// field on the template, like this:(((
482 {{image reference="FAQSheetEdit.PNG"/}}
483 )))
484 * Click //Save & View// and then you will see the newly created document, like this:(((
485 {{image reference="FAQSheetView.PNG"/}}
486 )))
487 * Go back to the ##FAQ.WebHome## page (you can use the breadcrumbs) to see the list of existing questions(((
488 {{image reference="FAQsWithEntry.png"/}}
489 )))
490
491 = Conclusion =
492
493 This tutorial has taught you how to use the Class Wizard app and it has detailed the concepts of classes, objects and properties and introduced the authoring templates and page design sheets.
494
495 You may also have learned a little bit about Velocity scripting in documents. You can use these basic concepts to build custom applications at the document or presentation layer of XWiki without having to compile or deploy code.
496
497 As always, please take the time to make this document better for other users if you find ways that it can be improved as you read it for the first time.

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected