CRUD: Difference between revisions
No edit summary |
No edit summary Tag: 2017 source edit |
||
(46 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
The following demonstrates the creation of a [https://en.wikipedia.org/wiki/Create,_read,_update_and_delete CRUD] (create, read, update, delete) interface performed through a button opening a popup form, a <code>visualdataquery</code> parser function that creates the table, and a template, namely [[Template:Task_action]], rendered within the column "action", holding another form that edits the same schema ([[VisualDataSchema:Task]]) based on the data of the page with value <code><nowiki>{{{pagetitle}}}</nowiki></code>, where <code><nowiki>{{{pagetitle}}}</nowiki></code> is the title of the article related to each row of the generated table. (see the [https://www.mediawiki.org/wiki/Extension:VisualData/Queries#Queries docs] for other parameters) | |||
The template is associated to the column "action" using the following wikitext | |||
<pre> | |||
template?action=Task action | |||
</pre> | |||
and '''all the properties of the row, as well as the article title, are available as named parameters'''. | |||
The form also demostrates the use of the option <code>target-slot = main</code> that instructs the form to save the json data to the main slot of the target article, as you can see [[{{FULLPAGENAME}}/12|here]]. Such data can then be edited through the edit button in the action column, through the tab "Edit semantic" in the target article, or even manually through "edit source" in the target article, and the changes will be reflected in the table below. | |||
The form also shows the integration of [https://www.mediawiki.org/wiki/Extension:VEForAll Extension:VEForAll] in the comments field. | |||
{{# | {{#visualdataform: Task | ||
|title = Task | |||
|action = create | |||
|edit-page = | |||
|return-page = {{FULLPAGENAME}} | |||
|view = popup | |||
|popup-size = large | |||
|css-class = | |||
|pagename-formula = {{FULLPAGENAME}}/<id-increment> | |||
|target-slot = main | |||
|edit-freetext = false | |||
|edit-categories = false | |||
|edit-content-model = false | |||
|default-categories = | |||
|default-content-model = wikitext | |||
|layout-align = top | |||
|popup-help = false | |||
|submit-button-text = | |||
|layout = tabs | |||
|validate-button-text = | |||
}} | |||
{{#visualdataquery: [[{{FULLPAGENAME}}/~]] | |||
|schema=Task | |||
|?assignee | |||
|?extension | |||
|?status | |||
|?action | |||
|template?action=Task action | |||
|format=datatable | |||
}} | |||
Here are the components to implement it. | |||
1) Json-schema describing the form: [[VisualDataSchema:Task]] (created through the [[Special:ManageSchemas|Schema builder]]) | |||
2) parser function for the form button | |||
<pre> | |||
{{#visualdataform: Task | |||
|title = Task | |title = Task | ||
|action = create | |action = create | ||
|edit-page = | |edit-page = | ||
|return-page = | |return-page = {{FULLPAGENAME}} | ||
|view = popup | |view = popup | ||
|popup-size = large | |popup-size = large | ||
|css-class = | |css-class = | ||
|pagename-formula = | |pagename-formula = {{FULLPAGENAME}}/<id-increment> | ||
|target-slot = main | |target-slot = main | ||
|edit-freetext = false | |edit-freetext = false | ||
Line 17: | Line 73: | ||
|default-content-model = wikitext | |default-content-model = wikitext | ||
|layout-align = top | |layout-align = top | ||
|popup-help = | |popup-help = false | ||
|submit-button-text = | |submit-button-text = | ||
|layout = tabs | |layout = tabs | ||
|validate-button-text = | |validate-button-text = | ||
}} | }} | ||
</pre> | |||
3) Parser function for the table | |||
<pre> | |||
{{# | {{#visualdataquery: [[{{FULLPAGENAME}}/~]] | ||
|schema=Task | |schema=Task | ||
|? | |?assignee | ||
|?extension | |?extension | ||
|?status | |?status | ||
Line 35: | Line 94: | ||
|format=datatable | |format=datatable | ||
}} | }} | ||
</pre> | |||
4) template [[Template:Task action]], containing another visualdata form, as mentioned called from the query for each row | |||
5) The templates [[Template:Extensions_list]] and [[Task_status_list]] (actually not a template) used in the form's dropdowns | |||
6) The extension [https://www.mediawiki.org/wiki/Extension:IDProvider IDProvider] triggered from an hidden input in the same schema, and then used as <code>pagename-formula</code> | |||
7) The extension [https://www.mediawiki.org/wiki/Extension:VEForAll VEForAll] in order to display [https://www.mediawiki.org/wiki/Extension:VisualEditor VisualEditor] in the textarea | |||
Of course the extension [https://www.mediawiki.org/wiki/Extension:VisualData VisualData], [https://www.mediawiki.org/wiki/Extension:Semantic_MediaWiki Semantic MediaWiki] is not required. | |||
== See also == | |||
{{Demo VisualData footer}} |
Latest revision as of 09:05, 25 March 2024
The following demonstrates the creation of a CRUD (create, read, update, delete) interface performed through a button opening a popup form, a visualdataquery
parser function that creates the table, and a template, namely Template:Task_action, rendered within the column "action", holding another form that edits the same schema (VisualDataSchema:Task) based on the data of the page with value {{{pagetitle}}}
, where {{{pagetitle}}}
is the title of the article related to each row of the generated table. (see the docs for other parameters)
The template is associated to the column "action" using the following wikitext
template?action=Task action
and all the properties of the row, as well as the article title, are available as named parameters.
The form also demostrates the use of the option target-slot = main
that instructs the form to save the json data to the main slot of the target article, as you can see here. Such data can then be edited through the edit button in the action column, through the tab "Edit semantic" in the target article, or even manually through "edit source" in the target article, and the changes will be reflected in the table below.
The form also shows the integration of Extension:VEForAll in the comments field.
page title | Assignee | Extension | Status | action |
---|---|---|---|---|
Demo VisualData/CRUD/43 | User:Admin | SemanticMediaWiki | assigned | form is loading... |
Demo VisualData/CRUD/44 | User:Admin | SemanticMediaWiki | assigned | form is loading... |
Demo VisualData/CRUD/34 | User:Admin | SemanticResultFormats/Datatables | assigned | form is loading... |
Demo VisualData/CRUD/12 | User:Admin | SemanticCite | peer review | form is loading... |
Demo VisualData/CRUD/33 | User:Admin | SemanticResultFormats/Carousel | assigned | form is loading... |
Demo VisualData/CRUD/42 | User:Admin | SemanticResultFormats/Carousel | peer review | form is loading... |
Here are the components to implement it.
1) Json-schema describing the form: VisualDataSchema:Task (created through the Schema builder)
2) parser function for the form button
{{#visualdataform: Task |title = Task |action = create |edit-page = |return-page = {{FULLPAGENAME}} |view = popup |popup-size = large |css-class = |pagename-formula = {{FULLPAGENAME}}/<id-increment> |target-slot = main |edit-freetext = false |edit-categories = false |edit-content-model = false |default-categories = |default-content-model = wikitext |layout-align = top |popup-help = false |submit-button-text = |layout = tabs |validate-button-text = }}
3) Parser function for the table
{{#visualdataquery: [[{{FULLPAGENAME}}/~]] |schema=Task |?assignee |?extension |?status |?action |template?action=Task action |format=datatable }}
4) template Template:Task action, containing another visualdata form, as mentioned called from the query for each row
5) The templates Template:Extensions_list and Task_status_list (actually not a template) used in the form's dropdowns
6) The extension IDProvider triggered from an hidden input in the same schema, and then used as pagename-formula
7) The extension VEForAll in order to display VisualEditor in the textarea
Of course the extension VisualData, Semantic MediaWiki is not required.