CRUD: Difference between revisions

From Wikisphere
Jump to navigation Jump to search
Subpages:
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(11 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 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  
The template is associated to the column "action" using the following wikitext  
Line 8: Line 8:




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 [[CRUD/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 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.
The form also shows the integration of [https://www.mediawiki.org/wiki/Extension:VEForAll Extension:VEForAll] in the comments field.
Line 17: Line 17:
|action = create
|action = create
|edit-page =  
|edit-page =  
|return-page = CRUD
|return-page = {{FULLPAGENAME}}
|view = popup
|view = popup
|popup-size = large
|popup-size = large
|css-class =
|css-class =
|pagename-formula =CRUD/<id-increment>
|pagename-formula = {{FULLPAGENAME}}/<id-increment>
|target-slot = main
|target-slot = main
|edit-freetext = false
|edit-freetext = false
Line 29: Line 29:
|default-content-model = wikitext
|default-content-model = wikitext
|layout-align = top
|layout-align = top
|popup-help = true
|popup-help = false
|submit-button-text =
|submit-button-text =
|layout = tabs
|layout = tabs
Line 38: Line 38:




{{#visualdataquery: [[CRUD/~]]
{{#visualdataquery: [[{{FULLPAGENAME}}/~]]
|schema=Task  
|schema=Task  
|?assignee
|?assignee
Line 61: Line 61:
|action = create
|action = create
|edit-page =  
|edit-page =  
|return-page = CRUD
|return-page = {{FULLPAGENAME}}
|view = popup
|view = popup
|popup-size = large
|popup-size = large
|css-class =
|css-class =
|pagename-formula =CRUD/<id-increment>
|pagename-formula = {{FULLPAGENAME}}/<id-increment>
|target-slot = main
|target-slot = main
|edit-freetext = false
|edit-freetext = false
Line 73: Line 73:
|default-content-model = wikitext
|default-content-model = wikitext
|layout-align = top
|layout-align = top
|popup-help = true
|popup-help = false
|submit-button-text =
|submit-button-text =
|layout = tabs
|layout = tabs
Line 85: Line 85:
<pre>
<pre>


{{#visualdataquery: [[CRUD/~]]
{{#visualdataquery: [[{{FULLPAGENAME}}/~]]
|schema=Task  
|schema=Task  
|?assignee
|?assignee
Line 110: Line 110:




{{#visualdataprint: {{FULLPAGENAME}} 
|?cover
|?title
|?authors/name
|?authors/email
|schema=Book
|template=Book
|template?authors=Book authors
|format=template
}}
 
This is a page with an infobox that demonstrates the use of VisualData ([https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualData/+/968230 latest version]) used as a [https://en.wikipedia.org/wiki/Create,_read,_update_and_delete CRUD]
Click the button below to edit the article's metadata through a popup or the tab "Edit semantic" among the article's actions.
{{#visualdataform: Book
|title = edit infobox and page
|action = edit
|edit-page = {{FULLPAGENAME}}
|return-page =
|view = popup
|popup-size = medium
|css-class =
|pagename-formula =
|edit-freetext = true
|edit-categories = false
|edit-content-model = false
|default-categories =
|default-content-model = wikitext
|layout-align = top
|popup-help = true
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}
The popup is rendered using the following code
<pre>
{{#visualdataform: Book
|title = edit infobox and page
|action = edit
|edit-page = {{FULLPAGENAME}}
|return-page =
|view = popup
|popup-size = medium
|css-class =
|pagename-formula =
|edit-freetext = true
|edit-categories = false
|edit-content-model = false
|default-categories =
|default-content-model = wikitext
|layout-align = top
|popup-help = true
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}
</pre>
   
   
A Pageproperties' form can edit whatever page (through the parameter <code>edit-page</code>, and create new pages with user-defined title or using a pagename formula. It is [https://json-schema.org/ json/schema] compliant<ref>It does not yet support allOf, anyOf, oneOf, and $refs both in the editor and in the viewer</ref>  and can handle subitems, multiple fields and multiple sub items. It is deeply integrated with the Mediawiki's [https://doc.wikimedia.org/oojs-ui/master/demos/ OOUI library] and uses a lot or most of its features.
'''In the latest version can query properties and nested properties, as well as render them using templates and nested templates and does not rely on [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki SemanticMediawiki]'''.
The infobox is rendered through the following code:
<pre>
{{#visualdataprint: {{FULLPAGENAME}}
|?cover
|?title
|?authors/name
|?authors/email
|schema=Book
|template=Book
|template?authors=Book authors
|format=template
}}
</pre>
This is a SemanticMediawiki-like parser function that can be used as a shorthand to invoke the more complex <code> {{#visualdataquery }} </code> parser function that can handle multi-page results and provides a basic query language. (more about this on the official page of the extension to be updated soon)
The results are rendered on the page using 2 templates, [[Template:Book]] and [[Template:Book authors]]. The second is used as a nested template rendered inside the parent template ([[Template:Book]]) entitled to render the properties with path <code>authors</code>. ''' Note that the parent template must include a reference to the name of the child template since both values and template's containers are passed as named parameters.'''
The form's schema(s) (a form can contain an arbitrary number of schemas, and a schema an arbitrary number of items and subitems) can be edited using this [[Special:ManageSchemas|Special page]] or [https://wikisphere.org/w/index.php?title=Test_visualdata_2.0&action=editsemantic this interface] (tab Edit semantic, edit icon on the right and then "Manage schemas")
The related [[VisualDataSchema:Book|schema]] created by the UI contains an hidden property "name" that is filled-in with the compounded value of the fields <code>first_name</code> and <code>last_name</code>.
Also, the cover file name contains a value-formula, that allows the file to be saved with the article-id as prefix (also for new articles) which is useful to easily upload on the wiki files with similar names.
Have fun with this extension !!
== See also ==
== See also ==


{{Demo VisualData footer}}
{{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.


form is loading...



page titleAssigneeExtensionStatusaction
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.


See also[edit | edit source]