Difference between revisions of "RecordAdmin cheatsheet"
From Organic Design wiki
(Imported from work.organicdesign.co.nz by sync-wikiorg.pl) |
(Change source-code blocks to standard format) |
||
| Line 5: | Line 5: | ||
=== EditWithForm === | === EditWithForm === | ||
Use this to add an "edit with form" link to articles using the template (i.e. of the record type). | Use this to add an "edit with form" link to articles using the template (i.e. of the record type). | ||
| − | + | <source> | |
| − | < | + | {{EditWithForm|Activity}} |
| − | + | </source> | |
== Content for Record Forms == | == Content for Record Forms == | ||
| Line 17: | Line 17: | ||
Next there is a ''div'' tag surrounding the area to be shown/hidden which must have an ''id'' attribute to be referred to by the checkbox's ''onChange'' event. Note that I have also added the ''style'' attribute that is used to ensure the form is initially in the correct state, it sets the style to ''display:none'' if the ''UseShipping'' value is set. | Next there is a ''div'' tag surrounding the area to be shown/hidden which must have an ''id'' attribute to be referred to by the checkbox's ''onChange'' event. Note that I have also added the ''style'' attribute that is used to ensure the form is initially in the correct state, it sets the style to ''display:none'' if the ''UseShipping'' value is set. | ||
| − | + | <source> | |
<input | <input | ||
name = "UseShipping" | name = "UseShipping" | ||
| Line 141: | Line 141: | ||
<pre> | <pre> | ||
<select name="MyDay">{{SelectDay|{{CURRENTDAY}}}}</select> | <select name="MyDay">{{SelectDay|{{CURRENTDAY}}}}</select> | ||
| − | </ | + | </source> |
| − | |||
Following is a useful JavaScript function for setting default times in a form such as in [[Form:Activity]]. It sets the start time to the current local time if it's empty, and only sets the end time to the current time if the start time is already populated. | Following is a useful JavaScript function for setting default times in a form such as in [[Form:Activity]]. It sets the start time to the current local time if it's empty, and only sets the end time to the current time if the start time is already populated. | ||
| − | + | <source lang="js"> | |
function setDefaultTimes(start,end) { | function setDefaultTimes(start,end) { | ||
var now = new Date(); | var now = new Date(); | ||
| Line 156: | Line 155: | ||
if (start.value == '') start.value = now; | if (start.value == '') start.value = now; | ||
} | } | ||
| − | </ | + | </source> |
==List of records== | ==List of records== | ||
Latest revision as of 18:11, 22 May 2015
Contents
General forms code
Content for Record Templates
EditWithForm
Use this to add an "edit with form" link to articles using the template (i.e. of the record type).
{{EditWithForm|Activity}}Content for Record Forms
Show a section of the form based on a checkbox state
Often many parts of a form are only relevant depending on other values, for example a biiling address may only be shown if the "same as shipping address" check-box is not ticked.
In this example, we have added an onChange event to the checkbox which causes things to show/hide. Only two things even need to be changed in this statement, first the "BillingAddress" which defines the element that will be affected when the value changes, and second the order of the 'none' : '' can be switched if the tick should correspond to hidden state rather than shown as it currently does.
Next there is a div tag surrounding the area to be shown/hidden which must have an id attribute to be referred to by the checkbox's onChange event. Note that I have also added the style attribute that is used to ensure the form is initially in the correct state, it sets the style to display:none if the UseShipping value is set.
<input
name = "UseShipping"
type = "checkbox"
onchange = "document.getElementById('BillingAddress').style.display=this.checked ? 'none' : ''"
/> Use shipping address
<div id="BillingAddress" style="{{{UseShipping|display:none}}}">
Street: <input name="Street" />
City: <input name="City" />
</div>
</pre>
;Result
<html>
<input
name = "UseShipping"
type = "checkbox"
onchange = "document.getElementById('BillingAddress').style.display=this.checked ? 'none' : ''"
/> Use shipping address
<div id="BillingAddress">
Street: <input name="Street" />
City: <input name="City" />
</div>
</html>
}}
=== Tooltips ===
{{code|1=<pre>{{Tooltip|label|content}}</pre>
<span class="tooltip"><font color=red>'''*This*'''</font></span> is a tooltip example, mouse over it to see.<div class="tooltip">The '''tooltip''' is a common [[w:graphical user interface|graphical user interface]] element. It is used in conjunction with a [[w:cursor (computers)|cursor]], usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.</div>
}}
=== Select list examples ===
==== Select a Record ====
Selecting a record will have a special parser function made for it so that instead of passing a single record type, a list or tree of records can be supplied.
*Forms use AJAX to render inline using a link
*Link is red if an instance doesn't currently exist
*Link works as a show/hide of form for single records, a tab-set for a list, or a tree-view for hierarchical lists
*It's expected that this be the primary method of creating sub-forms, so there's no need to select from lists of records
{{code|
<pre><select name="Organisation">{{FormSelectRecord|Organisation|Organic Design}}</select></pre>
;Result
{{#tag:html|<select>{{FormSelectRecord|Organisation|Organic Design}}</select>}}
}}
==== Populate options from a category ====
{{code|
<pre><select name="RecordType">{{FormSelectFromCategory|Records}}</select></pre>
;Result
{{#tag:html|<select>{{FormSelectFromCategory|Records}}</select>}}
}}
==== Populate options from titles in a namespace ====
{{code|
<pre><select name="Cat">{{FormSelectFromNamespace|Category}}</select></pre>
;Result
{{#tag:html|<select>{{FormSelectFromNamespace|Category}}</select>}}
}}
==== Populate options using a DPL query ====
{{code|
<pre>{{#tag:html|<select name="z-Articles">{{#dpl:titlematch=%z%|format = ,\n<option>%TITLE%</option>,, }}</select>}}</pre>
;Result (all articles containing a "z")
{{#tag:html|<select>{{#dpl:titlematch=%z%|format = ,\n<option>%TITLE%</option>,, }}</select>}}
}}
=== Creation Links ===
==== Link to New Record ====
{{code|
<pre>{{NewRecordLink|Create an issue...|Issue|Organisation|Organic Design|Project|RecordAdmin extension}}</pre>
;Result
{{NewRecordLink|Create an issue...|Issue|Organisation|Organic Design|Project|RecordAdmin extension}}
}}
==== Link to new article using preload ====
{{code|
<pre>{{CreateWithPreload|Create a new Role...|My new role|Create:Role}}</pre>
;Result
{{CreateWithPreload|Create a new Role...|My new role|Create:Role}}
}}
==== Article creation form with preload ====
{{code|
<pre>
<html>
<form action="/wiki/index.php" method="GET">
<input name="title" value="Enter title" />
<input type="hidden" name="preload" value="Create:Role" />
<input type="hidden" name="action" value="edit" />
<input type="submit" value="Create!" />
</form>
</html>
</pre>
;Result
<html>
<form action="/wiki/index.php" method="GET">
<input name="title" value="Enter title" />
<input type="hidden" name="preload" value="Create:Role" />
<input type="hidden" name="action" value="edit" />
<input type="submit" value="Create!" />
</form>
</html>
}}
=== Date and time ===
We're using [http://www.frequency-decoder.com/demo/date-picker-v2 date-picker-v2]
{{code|
<pre>
MyDate:
<select name="MyDay" id="date-sel-dd">{{SelectDay}}</select>
<select name="MyMonth" id="date-sel-mm">{{SelectMonth}}</select>
<select name="MyYear" class="split-date" id="date-sel">{{SelectYear}}</select>
</pre>
;Result
MyDate:
<html>
<select name="MyDay" id="date-sel-dd">{{SelectDay}}</select>
<select name="MyMonth" id="date-sel-mm">{{SelectMonth}}</select>
<select name="MyYear" class="split-date" id="date-sel">{{SelectYear}}</select>
</html>
You can supply a parameter to use as a default if there's no current value, for example:
<pre>
<select name="MyDay">{{SelectDay|{{CURRENTDAY}}}}</select>Following is a useful JavaScript function for setting default times in a form such as in Form:Activity. It sets the start time to the current local time if it's empty, and only sets the end time to the current time if the start time is already populated.
function setDefaultTimes(start,end) {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
now = (hour<10?'0'+hour:hour) + ':' + (min<10?'0'+min:min);
var start = document.getElementById(start);
var end = document.getElementById(end);
if (start.value) if (end.value == '') end.value = now;
if (start.value == '') start.value = now;
}List of records
{{#recordtable:Issue
| cols = modified, title, AssignedTo
| sortable = yes
| orderby = created desc
| Solution = ^$
}}
See Category:Issues. This wiki text displays the list at the top of the page.
Financial
Obtaining Data
UserFromPerson
PersonFromUser
Training
- Set Up user accounts
- add {{UserPage}} to User Pages
- Show how to create tasks
- Show how to edit/re-assign tasks
- Show how to watch tasks
- Show how to see tasks from user page
