Page Forms Examples

[tholzheim]

As proposed in #104 I have looked into nearly all pages listed on https://wikiapiary.com/wiki/Extension:Page_Forms
Most just use the basic functionality of the Page Forms Extensions https://www.mediawiki.org/wiki/Extension:Page_Forms
One of the most advanced uses of page forms is this one https://directory.fsf.org/wiki?title=Blender&action=formedit

So basically the current OPENRESEARCH is state of the art. Further improvements can only be done with technical tricks that might harm the maintainability of the site.
@MusaabKh and I are currently working on a prototype see https://confident.dbis.rwth-aachen.de/wikicms/

[WolfgangFahl]

https://fuutxr.axshare.com/#g=1&p=enter_event is inspired by Zenodo which is based on a totally different platform and backed by a much larger development team. I think we should not try to imitate this if leads to unclean technical solutions and extra effort. The http://wiki.bitplan.com/index.php/Template:HideShow approach with the needed Javascript http://wiki.bitplan.com/index.php/MediaWiki:Common.js is already tricky and does not work in all environments out of the box. I got it working in some MediaWiki configurations but not in others.

#70 Add Frontend with content negotiaton will later give us a lot more options. For the curators that do the main chore of entering events and event series it think the priorities are diffferent then for other stakeholders.

[WolfgangFahl]

Avoiding Javascript we'd have to maintain ourselves is a good idea!

[MusaabKh]

Here are some screenshots from the page 3DUI:
Collapsed:

Expanded:

The link to the page:
https://confident.dbis.rwth-aachen.de/ormk/index.php?title=3DUI

The code snippet used:

`{| class="mw-collapsible mw-collapsed wikitable"
! General Information
|-
| //anything here can be added which will be hidden
}`

[MusaabKh]

Another TestPage just for the Expand and Collapse Functionality:
https://confident.dbis.rwth-aachen.de/ormk/index.php?title=TestingInfoBox

[WolfgangFahl]

Great - let's see what the feedback will be.

[clange]

It's great to see so much creativity here in short time – special thanks to @MusaabKh and @tholzheim!
Regarding @WolfgangFahl and your comment about "content negotiation", I could even imagine different entry forms for different roles. I don't want to make your job more complex, rather simpler. Feel free to move this to a separate thread.

• a simple form for the user story "as a non-participant, I want to enter information about an event I have heard about",
• a slightly richer one for the user story "as a participant, I want to enter information about an event I have attended or am planning to attend"
• a fully featured one for "as an organizer (local organizer, proceedings chair, programme chair, …), I want to enter all details about my event".

Of course it should be easily possible to switch between them. I.e., to just have them as different views that everybody can choose from. Not that (heaven forbid!) OpenResearch links your actual role in each event to your user account and offers you restricted functionality based on that ;-)

[WolfgangFahl]

Here is a video on how not to implement things: https://youtu.be/aSyMV6wc8wI?list=TLGGqXaaNJWuzSoxODAyMjAyMQ. The forms are using lots of terms that are along the needs of the institution running the software instead of being aligned with the user needs. The forms are not self explaining and complicated. We'd love to be much simpler and self explaining close to what the stakeholders expect.

[WolfgangFahl]

If you want to have more fun like this read https://www.marktstammdatenregister.de/MaStRHilfe/files/regHilfen/Handbuch%20Aufforderung%20zur%20Datenkorrektur.pdf

[tholzheim]

I found a way to make the forms dynamically depended on the underlying properties by just providing the property for the field and querying the rest.

{{{field
          |{{#show: Property:Event id|?Property label}}
          |input type={{#show: Property:Event id|?Property inputType}}
          |placeholder={{#show: Property:Event id|?Property placeholder}}
          |{{#ifeq: {{#show: Property:Event id|?Property allowedValues }} |||values={{#show: Property:Event id|?Property allowedValues }} }}
          |{{#ifeq: {{#show: Property:Event id|?Property values from }} ||| values from {{#show: Property:Event id|?Property values from }} }}
          |{{#ifeq:{{#show: Property:Event id|?Property mandatory}}|true|mandatory}}
          |{{#ifeq:{{#show: Property:Event id|?Property primary key }}|true|unique}}
  }}}

Note: This approach requires to adjust the type of some property properties and also add new property properties.

By defining all fields like this, a generator for forms can easily be implemented.

[MusaabKh]

I was already working on a form generator and this would work nicely for that.

[WolfgangFahl]

Could you please try out your results with "Template:Event" on your copies?

[tholzheim]

I improved this method by placing it in a template.
Now I can define a Form for Event as follows

{{{for template|Event|label=Event}}}
{| class="formtable BlueForm mw-collapsible" style="width:100%;"
!  colspan="2" class="BlueFormHeadline"|Basic information<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:Event id}}<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:Title}}<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:Event acronym}}<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:In event series}}<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:Ordinal}}<nowiki>
   </nowiki>{{CreateFormRowByProperty|Property:Event type}}
|}

The Form can be found here.
This code uses a variety of different Templates that query the needed information from the properties.

During the implementation of the templates I added the Concept:Regexp which corresponds to https://www.mediawiki.org/wiki/Extension:Page_Forms/Input_types/Regexp it allows to define custom datatypes for fields. For example Property:Ordinal only allows numbers, therefore, it uses Regexp:NaturalNumber which restricts the input of the ordinal field to positive integers and shows an error message otherwise.

Generating Forms

The use of templates to generate the fields also allows to generate the complete Form by querying the properties and formating the results by providing a template:

{{#ask: [[used for::Concept:Event]]|link=none|format=plainlist|template=CreateFormRowByProperty}}

Complete Example

Here we generate a Form for Events with a categorization of the properties in

• mandatory
• recommended
• optional

I am experimenting with different colors for the categories

by querying all information from the properties.
The Generated Form can be found here

Code

{{{for template|Event|label=Event}}}
----
{| class="formtable RedForm mw-collapsible" style="width:100%;"
!  colspan="2" class="BlueFormHeadline"|mandatory
{{#ask: [[used for::Concept:Event]][[Usage_obligation::mandatory]]|link=none|format=plainlist|template=CreateFormRowByProperty}}
|}
----
{| class="formtable BlueForm mw-collapsible mw-collapsed" style="width:100%;"
!  colspan="2" class="BlueFormHeadline"|Recommended
{{#ask: [[used for::Concept:Event]][[Usage_obligation::recommended]]|link=none|format=plainlist|template=CreateFormRowByProperty}}
|}
-----
{| class="formtable GreenForm mw-collapsible mw-collapsed" style="width:100%;"
!  colspan="2" class="BlueFormHeadline"|Optional
{{#ask: [[used for::Concept:Event]][[Usage_obligation::optional]]|link=none|format=plainlist|template=CreateFormRowByProperty}}
|}
----

Generated Form

Encountered Issues

• The properties of Event currently do not provide all information needed to generate the field.

  For this example I added all required information.

• Page Forms regexp does currently not wrk with all regexp (might be a version issue)
• Index and sortPos not defined for most of the properties
  • If defined it would allow sort the fields in the defined priority

[MusaabKh]

Another take on the collapsible forms.

Sample images:

Expanded:

Sample link for the form: https://confident.dbis.rwth-aachen.de/ormk/index.php?title=3DUI_2020

[tholzheim]

Finally I found some better examples:

• Forms with collapsing fields: https://spore.fandom.com/wiki/Special:FormEdit/Fiction_character/test
  

• Forms with advanced styling: example 1 and example 2

[WolfgangFahl]

Looks like we are making good progress. See https://www.openresearch.org/wiki/Heike_Prototypen