MediaWiki:Common.css and Manual:Extension/Page Forms: Difference between pages

(Difference between pages)
No edit summary
 
No edit summary
 
Line 1: Line 1:
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
<span style="color: rgb(51, 51, 51)">With</span> '''Page Forms,''' users without administrator rights can use forms to create and edit pages to query data - without programming knowledge.
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */
.icon-bluespice-logo:before {
    font-family: 'icomoon' !important;
    content: "\e910";
}


/* bootstrap icons in blue and big */
<span style="color: rgb(51, 51, 51)">The use of the extension is documented on</span> [[mediawikiwiki:Extension:Page_Forms|documented on MediaWiki]]<span style="color: rgb(51, 51, 51)">.</span>
.bi-big {font-size: 2rem; color: #2b80ea}


/*images in a list*/
==Main features==
#content li figure, #content li .floatnone, #content li  img:first-child, #content li .thumb, content li .thumb img:first-child
{
    margin-top:1.5em; margin-bottom:1.5em;
}
#content li.ve-ce-branchNode .thumb img:first-child, #content li.ve-ce-branchNode figure img:first-child, #content li.ve-ce-branchNode img.ve-ce-chimera {
    margin-top:0;
}
#content li .thumb {
    margin-bottom:0
}


*'''Definition pages in the namespace ''Form'''''  The New forms can be created using the special page <code>Special: CreateForm</code>. Here, users select an existing template which provides the paramaters for the form. This means that before a form is created, the required template is always created first. All created form definition pages are saved in the ''Form'' namespace.  Subsequent edits to the form definition page have to be made in source editing mode.
*'''Application example: info boxes'''                                                                                                                                                          Page Forms is often used to add and edit infoboxes on a wiki page. If [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic MediaWiki] is used, the collected data in the templates can be stored and retrieved.
*'''Edit existing forms values via menu item'''                                                                                                                                                      Existing values in a template can be updated using the menu item "Edit with form" of the page edit button, for example.
*'''Automatic completion of fields'''  Users Users are offered existing values when entering them, depending on the form input type. This reduces problems with naming ambiguities, spelling, etc.
*'''Free text field''' Free text on the page that is not part of the template itself can be displayed in a separate input field called "Free text" for editing directly in forms mode.


==BlueSpice input types==
In addition to the  [https://www.mediawiki.org/wiki/Extension:Page_Forms/Input_types?action=view#The_input_types default input types], BlueSpice offers the following additional input types:
{| class="contenttable-blue" style="width:950px;"
! style="background-color:rgb(239, 243, 249);text-align:inherit;box-sizing:inherit;padding:4px;border:1px solid rgb(177, 185, 207);color:rgb(62, 83, 137);" class="" |Input type
! style="background-color:rgb(239, 243, 249);text-align:inherit;box-sizing:inherit;padding:4px;border:1px solid rgb(177, 185, 207);color:rgb(62, 83, 137);" class="" |Result
! style="background-color:rgb(239, 243, 249);text-align:inherit;box-sizing:inherit;padding:4px;border:1px solid rgb(177, 185, 207);color:rgb(62, 83, 137);" class="" |Function
|- style="box-sizing: inherit; border: 1px solid rgb(177, 185, 207); border-spacing: 0px; border-collapse: collapse; padding: 10px;"
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |[[#bs-grid|bs-grid]]
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |input table
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |grid-based input field to combine related paramters.


Table rows can be added with a "+" button. The following templates need to be created:


*Template for the table row plus its related columns.json page
*Template for the output of the grid on a wiki page
|- style="box-sizing: inherit; border: 1px solid rgb(177, 185, 207); border-spacing: 0px; border-collapse: collapse; padding: 10px;"
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |bs-usercombo
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |User name (with link to the profile page)
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |(Single selection).
|- style="box-sizing: inherit; border: 1px solid rgb(177, 185, 207); border-spacing: 0px; border-collapse: collapse; padding: 10px;"
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |bs-usertags
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |Comma-separated user name
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |Menu that allows to select  existing wiki users
(multiple selections possible).


#data-after-content {display: none;}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {padding: 0.8em 0.4em;}
span.new::after { content: 'neu!'; vertical-align: super; background: #64b334; margin-left: 3px;font-size: 10px;padding: 2px 5px; border-radius: 50%;
color:#ffffff;}
.flexbox{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:stretch;}
.flexbox div{margin:5px;padding:2px 8px;text-align:center;background:#ececec}
.center > div.thumb {margin-top:2em}
#content .toctitle h2 {margin-right: 1em; display: inline;font-size: 1.4rem;}
.qtip {font-size: 1em;line-height: 1.4em;}


/*Related links */
Note: To link to the profile page, the corresponding parameter in the template needs to be formated accordingly:
h2#relatedinfo
{border-left: solid 4px #d8d8d9;
background:#f1f3f9;
color: #868585;
margin-top: 3rem;
margin-bottom:0 !important;
padding: 20px 10px 2px 30px;
}
.relatedtopics {
display:flex;
flex-wrap: wrap;
border-left: solid 4px #d8d8d9;
background:#f1f3f9;
padding: 2em !important;
margin:0  !important;
}
.relatedtopics .col{flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}


/*Themen*/
.flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
.flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
.flexbox.themenhd  div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
.themenhd div a {display:block}
.themenhd div:hover {background:rgb(233,233,238,0.5)}
ul.smw-format.ul-format.alltopics-col {column-count: 3;}


/*Tours */
<code style="box-sizing: inherit; font-family: monospace, Courier; font-size: 13.5px; padding: 1px 4px; color: black; background-color: rgb(249, 249, 249); border-radius: 2px; border: 1px solid rgb(221, 221, 221);"><nowiki>{{#arraymap:{{{myParameter|}}}|,|@@@|[[User:@@@|@@@]]}}</nowiki></code>
.nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
|- style="box-sizing: inherit; border: 1px solid rgb(177, 185, 207); border-spacing: 0px; border-collapse: collapse; padding: 10px;"
#mw-content-text .nextstep a:not(.new), [class^="mw-content-"] .nextstep a:not(.new), #mw-content-text .nextstep a:link:not(.new), [class^="mw-content-"] .nextstep a:link:not(.new) {
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |bs-mvvisualeditor
    color: #ffffff;   font-weight: bold;}
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |Formatted text
#mw-content-text .nextstep a:not(.new):hover, #mw-content-text .nextstep a:link:not(.new):hover, [class^="mw-content-"] .nextstep a:link:not(.new):hover {
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |Text box with simplified [[:de:VisualEditor|VisualEditor]].
    color: #efefef;}
|- style="box-sizing: inherit; border: 1px solid rgb(177, 185, 207); border-spacing: 0px; border-collapse: collapse; padding: 10px;"
.nextstep a:not(.new)::after, .nextstep a:link:not(.new)::after {content: " \25B6";}
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |''bsvisualeditor''
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" | -
| style="box-sizing:inherit;padding:10px;border:1px solid rgb(177, 185, 207);border-spacing:0px;border-collapse:collapse;" |''Obsolete - replaced by bs-mvvisualeditor''
|}


/*Main page*/
===bs-grid===
.flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
Bs-grid provides the possibility to use table rows to collect combined values for a particular parameter:
.mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
<br />
#maintopics ul {list-style: none!important;}
[[File:bs-grid-en.png|alt=entering grid-data for a single form field|center|thumb|650x650px|entering grid-data for a single form field]]
#maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
#mpbanner {background:#fff url(/w/nsfr_img_auth.php/f/fa/BlueSpice-Demo_Header.jpg) -90px no-repeat; background-size: 1000px 122px;}
#mpbanner-byline {font-size:1.8em; color:#3e5389;line-height: 0.8rem; padding-top: 20px;}
#mpbanner-title {font-size:3.4rem; color:#3e5389; line-height:1.2em; font-weight: 900;letter-spacing: 1px; display:block}
#maintopics h2 span::before {vertical-align: text-bottom;padding-bottom: 2px;}


/** Cards **/
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
.cards > div {flex-basis:290px; margin-bottom:50px; border-top: 1px solid #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
.cards > div:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
}
.cards a.image img {max-width:600px}
.cards .screenshot {width:300px;height:200px; overflow:hidden; border-top:14px solid #eee; border-bottom:14px solid #eee}
#content #bodyContent .cards h2 {margin:10px; padding:0; font-size:1.1rem; font-color:#444; border:none; text-align:center}
.cards h2 .mw-editsection {display:none}
.cards .text {font-size:0.85rem; padding:20px 10px; text-align:center; font-weight:bold;}
#mw-content-text text a:not(.new), [class^="mw-content-"] .text a:not(.new), #mw-content-text .text a:link:not(.new), [class^="mw-content-"] .text a:link:not(.new), #mw-content-text .text a:not(.new):visited, [class^="mw-content-"] .text a:not(.new):visited, #mw-content-text .text a:link:not(.new):visited, [class^="mw-content-"] .text a:link:not(.new):visited
{color:#444;}
.cards .emptycard, .cards > div.emptycard:hover
{border: 0;
box-shadow: none;}
.getButton {
    display: inline-block;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 0 10px 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 8px;}


#mw-content-text .getButton a:not(.new), [class^="mw-content-"] .getButton  a:not(.new), #mw-content-text .getButton  a:link:not(.new), [class^="mw-content-"] .getButton  a:link:not(.new), #mw-content-text .getButton a:not(.new):visited, [class^="mw-content-"] a:not(.new):visited, #mw-content-text .getButton a:link:not(.new):visited, [class^="mw-content-"] .getButton a:link:not(.new):visited
'''To create the grid-based form field and its output:'''
{color:#ffffff;}
.getButton:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
color:'f5f5f5';
}
.getButton:active {
position:relative;
top:1px;
}
.getButton a:before {font-family: 'fontawesome';
content: '\f019 ';
font-size: 1.3em;
vertical-align: middle;
margin-right: 10px;
}


.cart a:before {font-family: 'fontawesome';
#'''Create'''  the template ''Template:Products/Row''.
content: '\f217 ';
##'''Define''' the parameters, for which to collect values. Gere we create a table row, so that we can later display the collected data as a table:<syntaxhighlight lang="text">
}
<noinclude>Table row for the output of the product data</noinclude><includeonly>
|-
|{{{product|}}}
|{{{department|}}}
|{{{availDate|}}}
|{{{sale|}}}
</includeonly>


.downloadarea {
</syntaxhighlight>
text-align:center;
#'''Define''' the grid in the page ''Template:Products/Row/Columns.json'':<syntaxhighlight lang="json">
display: inline-block;
[
float: right;
{"header":"Product name","dataIndex":"product", "flex":1, "editor":{"allowBlank":false}},
margin: 0 0 20px 40px;
{"header":"Department","dataIndex":"department","editor":{"xtype":"combo","typeAhead":true,"triggerAction":"all","store":[["Toddler","Toddler"],["Boys","Boys"],["Girls","Girls"],["Men","Men"],["Women","Women"]]}},
padding: 10px;
{"xtype":"datecolumn","header":"Available from","dataIndex":"availDate","format":"d.m.Y","editor":{"xtype":"datefield","format":"d/m/y","minValue":"01/01/21"}},
background: #efefef;
{"xtype":"checkcolumn","header":"On sale?","dataIndex":"sale","headerCheckbox":true,"stopSelection":false}
background: linear-gradient(270deg, rgb(240, 240, 240) 0%, rgb(224, 224, 224) 52%, rgb(240, 240, 240) 100%);
]</syntaxhighlight>'''Note: '''The syntax of this json file is produced by the Ext JS framework. Links to the documentation of the grid syntax are provided under [[Manual:Extension/Page Forms#Related info|''Related info'']] at the end of this page (JS-knowledge required).<br />
}
#'''Create''' the page ''Template:Products.'' It contains the output format for the data. It is also formatted as a filterable table. <br /><syntaxhighlight lang="text">
.downloadarea p {margin:0}
<noinclude>Output table for product data.
@media only screen and (max-width: 768px)
The parameter "productdate" is processed in the form Form:Products.
{.cards > div {flex-basis:98%; }
</noinclude><includeonly>{{#default_form: Products}}
}
{| class="wikitable filterable"
.oo-ui-panelLayout-framed {border: 0;}
|+Product overview for our current collection
.oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}
!Product name
!Department
!Available from
!On sale?
{{{productdata}}}
|}
</includeonly>


</syntaxhighlight>
#'''Create''' the data entry form ''Form:Products''. The form field  ''productdata''  defines the data entry type as a table (bs-grid): <br /><syntaxhighlight>
<noinclude>This is the form "Products".It is being used with the template Template:Products.</noinclude><includeonly>
<div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #AAAAAA;"></div>
{{{for template|Products}}}
Products:


{{{field|productdata|input type=bs-grid|colDef=Template:Products/Row/Columns.json|template=Products/Row}}}


/*HP Aktuelles */
{{{end template}}}
#aktuelles {background: rgba(201, 224, 143, .3); padding:10px; margin:20px 0}
#aktuelles h2::before {font-family:'fontawesome'; font-size:0.8em; content:'\f02e'; color: #64b334; margin-right:10px}
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
#aktuelles table {margin: 0 8px 15px 37px}
#aktuelles td {padding:3px 10px}


{{{standard input|save}}} {{{standard input|preview}}} {{{standard input|cancel}}}
</includeonly>
</syntaxhighlight><br />
#'''Include''' the template "Products" on a wiki page.
##'''Click''' ''Insert > Template'' in the editor toolbar.
##'''Enter''' "Products.<br />[[File:bs-grid-addtemplate-en.png|alt=add the Products template to a page|center|thumb|450x450px|add the Products template to a page]]
##'''Click''' ''Add template.''
##'''Save''' the page.
##'''Open''' the page in form-edit mode (using the drop-down menu next to the "+"-button in the top toolbar.The page open in forms mode. Enter your data in the products grid.
##'''Save''' the page again. The filterable products table is now shown.<br />[[File:bs-grid-en-output.png|alt=Output of the grid data for parameter productdata|center|thumb|650x650px|Output of the grid data for parameter productdata]]<br />In source code view, the ''productdata'' parameter looks like this:
<syntaxhighlight lang="text">
{{Products
|productdata={{Products/Row|product=Trekking pants|department=Men|availDate=30.07.2021|sale=true}}
{{Products/Row|product=Sweater|department=Boys|availDate=04.07.2021}}
{{Products/Row|product=Socks|department=Women|availDate=03.08.2021}}
}}
</syntaxhighlight><br />


table.padded td, table.padded th {padding:8px}
==Special pages==
Page Forms defines some special pages that are used for data input and data maintenance.


/*Quiz*/
Among others, the following [[mediawikiwiki:Extension:Page_Forms/Special_pages|special pages]] are important for data collection:
.quiz .question{margin-bottom:3em;}
[[File:Erweiterung-Page Forms-12190872.drawio.png|center|512x512px]]
.questionText{font-weight:700;margin-bottom:1.2em;}
.question .header{background:#fff0e1;padding:1px 6px;}
span.questionText{display:block;}
.question td{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.question th{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.quiz table{width:100%;}
.quizQuestions .question .sign{width:26px;}
.quiz table.settings{margin-left:30px!important;}
.mw-content-ltr .quiz .question .border{border-width:0 0 0 12px !important;}
.quiz .margin.right{background-color:#8ed27d!important;}
.quiz .margin.NA{background-color:#337ecc!important;}
.quiz .margin.wrong{background-color:#ff5c64!important;}
.quiz .question .border.right{border-color:#8ed27d!important;}
.quiz .question .border.NA{border-color:#337ecc!important;}
.quiz .question .border.wrong{border-color:#ff5c64!important;}
.quiz .question .check.right{outline:3px solid #8ed27d!important;}
.quiz .question .check.NA{outline:3px solid #337ecc!important;}
.quiz .question .check.wrong{outline:3px solid #ff5c64!important;}
.quizForm input[value="Submit"]{background:#36c;border:none;color:#FFF;margin-right:10px;margin-left:30px;padding:6px 12px;}
.quizForm input:hover[value="Submit"]{background:#2551aa;}
.quizForm input[value="Reset"]{background:#a4a4a4;border:none;color:#FFF;margin-right:10px;padding:6px 12px;}
.quizForm input:hover[value="Reset"]{background:#858585;}
.quiz .correction{background-color:#ffe4c9;display:block;font-weight:700;margin:10px 0 30px 28px;padding:20px;}


.bi {
    display: inline-block;
    vertical-align: -0.125em;
}
/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px; margin:10px;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px; margin:6px;}
.sectionflex.col4 > div {flex-basis:23%; padding:10px 20px; margin:10px;}
.sectionflex > div.empty {border:none; background:none}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, .sectionflex span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}


/*Themen*/
<br />
.sectionflex.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle; padding: 6px; border-radius: 50%;}
{{Box Links-en|Topic1=[[mediawikiwiki:Extension:Page_Forms/de|https://www.mediawiki.org/wiki/Extension:Page_Forms/en]]|Topic2=[[Reference:Page Forms]]}}
.sectionflex.themenhd  div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
[[de:Handbuch:Erweiterung/Page Forms]]
.sectionflex.themenhd.background  div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#fff; padding: 10px; }
[[en:{{FULLPAGENAME}}]]
.themenhd div a {display:block}
<br />
.themenhd div:hover {background:rgb(233,233,238,0.5)}
ul.smw-format.ul-format.alltopics-col {column-count: 3;}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}
 
/*Präsentationen*/
* {
-webkit-print-color-adjust: exact !important;  /* Chrome, Safari */
color-adjust: exact !important;                /*Firefox*/
}
 
.bs-data-after-content, .mw-lingo-tooltip {display:none}
.slideNav {font-size:1rem}
.slideNext::after {font-family:"fontawesome"; content:"\f061"; color:blue; margin-left: 5px;}
.slidePrevious::before {font-family:"fontawesome"; content:"\f060"; color:blue; margin-right:5px;}
.slideHd h1 {border-bottom: 1px solid #e5e5e5;}
.main-footer {display:none;}
.slideBoxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.slideBoxes > div {
    width: 45%;
    color: #242424;
    background-color: #f2f2f2;
    border-radius: 20px;
    padding: 4px 30px;
    margin: 15px;
    justify-content:center;
}
.slideBoxes > div.empty {background:none;}
.slideBoxes.hdOnly > div.haslink {transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer;}
.slideBoxes.hdOnly > div.haslink:hover {box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);}
.slideBoxes.hdOnly > div {padding:10px;}
.slideBoxes.col3 > div {width:30%;}
.slideBoxes.col1 > div {width:90%;}
#content #bodyContent .slideBoxes h2 {
font-size:1.375rem;
border-bottom: 0px;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 0px;
font-weight:bold;
color: #242424;
position:relative;
}
#content #bodyContent #mw-content-text .slideBoxes h2 {padding-left:68px; display:block; min-height:2em;}
#content #bodyContent #mw-content-text .slideBoxes.noicon h2 {padding-left:0;}
#content #bodyContent #mw-content-text .slideBoxes h2 a {color: #242424 !important;}
 
#content #bodyContent .slideBoxes p {
margin-top:0.5em;
font-size:1.2em;
}
.slideBoxes .fas,.slideBoxes .fab, .slideBoxes .fa {
    margin-right: 20px;
    vertical-align: sub;
    font-size:1.7em;
    margin-left:-56px;
}
.slidetext, .slidetext p, .slidetext div, .slidetext h3 {font-size:1.3rem;}
#slidecollection {width:100%;}
#slidecollection .slideNav {display:none;}
#slidecollection .slide {padding-top:30px;
background:url('https://de.wiki.bluespice.com/w/nsfr_img_auth.php/6/60/BlueSpice_Logo_v2020-steel-150.png')top right no-repeat !important;
background-size:50px;}
 
.collapsers h2 {background:#e7e7e7; border:0; padding:10px; color:#333}
 
/*Referenz Seiten */
.extension-infobox {width:25em;font-size:90%;background-color:#f1f3f9;color:black;margin-bottom:0.5em;margin-left:1em;padding:0.2em;float:right;clear:right;text-align:left;}
.extension-infobox-header{text-align:center;background-color:#2e6096;padding:8px; color:#ffffff;}
.extension-infobox-headertext{font-size:larger;color:#FFFFFF;}
.extension-infobox-description{font-weight:normal!important;text-align:left;background-color:#f1f3f9;padding:20px 10px 20px 10px!important;}
.extension-infobox-first-row{vertical-align:top;padding:20px 10px 0 10px;}
.extension-infobox-row{vertical-align:top;padding:0 10px;}
.extension-infobox-last-row{vertical-align:top;padding:0 10px 20px 10px;}
.extension-infobox-helppage{font-weight:normal;text-align:center;vertical-align:top;padding-left:10px;padding-top:10px;padding-bottom:10px;background-color:#eeeeee;}
.extension-infobox.fullwidth {width:100%; float:none;  font-size:1em; margin-left:0;}
.extension-infobox.fullwidth th {text-align:right; }
.extension-infobox-header, .extension-infobox-helppage {text-align:center !important; font-size:1.1em}
.extension-infobox.fullwidth th, .extension-infobox.fullwidth td {padding:8px;width:100px; border: 1px solid #ffffff;}
.extension-infobox.fullwidth td {width:300px; }
.extension-infobox-helppage { background-color: #eaecf0;}
#content #bodyContent #importdata h3 {margin:1em 0 1.4em;}
#importdata .flexbox {justify-content: space-between; margin-top: 2em;}
#mw-content-text #importdata .flexbox h3, [class^="mw-content-"] #importdata .flexbox h3 {background:#d8d8d9; margin:0 0  12px 0; padding:8px; font-size:1em !important; font-weight:bold}
#importdata .mw ul, .bs ul {margin:0}
#importdata .mw li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 1px top 3px / 18px url('/w/nsfr_img_auth.php/c/c6/MediaWiki-2020-small-icon.svg');}
#importdata .bs li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 2px top 4px / 15px url('/w/nsfr_img_auth.php/c/c4/Bluespice_Icon.svg');}
#importdata .flexbox div {background:#f1f3f9; text-align:left; margin:0; flex-basis:33%; padding:0}
#importdata table.wikitable > tr > th, #importdata table.wikitable > * > tr > th,  table.wikitable.reference > tr > th, .importdata .wikitable.reference > * > tr > th {background-color: #eaecf0;text-align: left;padding:8px; border: 1px solid #ffffff}
#importdata  table.wikitable > tr > td, #importdata  table.wikitable > * > tr > td, #importdata  table.wikitable.reference > tr > td, #importdata  table.wikitable.reference > * > tr > td {padding:8px;  border: 1px solid #ffffff;}
#importdata div .inner {padding:8px 12px}
#importdata .bs p {font-size: 0.9rem; margin-left: 2.1em; display:list-item;}
 
 
/*404 system message badaccess-groups*/
#system404-error {text-align:center;}
#system404-error div.floatnone a.image img {padding:0; margin:0;}
#system404-error hr {
    margin-top: 0px;
    margin-bottom: 2rem;
    border: 0;
    max-width: 600px;
    border-top: 3px dotted #ddd;
}
 
 
 
#content .toc li {margin-bottom: 0.1em;}
 
/* Icon in boxes on reference pages */
.questionmark-icon::before {
  content: '\f059';
  font-family: 'fontawesome';
  color:#6f6969;
  vertical-align: -0.1em;
}
 
/*revert font size in Quick Search - original title info should be smaller */
.bs-extendedsearch-autocomplete-popup .bs-extendedsearch-autocomplete-popup-primary {
    font-size: 0.95rem;}
.bs-extendedsearch-result-original-title label {font-size:0.8rem;}
 
 
/*Accessibility form*/
div[data-form="Pagedraft:AccessibilityReport"] .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {width:12em !important;  text-align:right; padding-right:0 !important; border-bottom:1px solid #d0cece}
 
div[data-form="Pagedraft:AccessibilityReport"] .oo-ui-fieldLayout-body >  .oo-ui-fieldLayout-field {width:40em !important}
 
 
/*Numbered lists*/
article ::marker {
content: counters(list-item,'.')". "
}
article .references ::marker {
content: " "
}
article ol {
margin-left:2em!important;
}
/*Number footnotes separately */
article ol.references {
counter-reset:ref; list-style-type:none;
}
article ol.references li:before{
    counter-increment:ref;
    content:counter(ref) ". ";
    float: left;
    margin-right: 0.4em;
}
/*Release notes TOC */
.page-Setup_Release_Notes .customtoc ul >  li.toclevel-1  {display:inline-block}
.page-Setup_Release_Notes .customtoc ul  ul {display:none}
.page-Setup_Release_Notes .customtoc  ul > li.toclevel-1:after {content:'|'; padding-left:10px}
.page-Setup_Release_Notes .customtoc .toc {width:100%;}
 
/*popImg template */
 
  div.tright { margin-left:0;}
.tippy-content-container .thumbinner a > img {width: 100%;}

Latest revision as of 16:25, 4 May 2023

With Page Forms, users without administrator rights can use forms to create and edit pages to query data - without programming knowledge.

The use of the extension is documented on documented on MediaWiki.

Main features

  • Definition pages in the namespace Form The New forms can be created using the special page Special: CreateForm. Here, users select an existing template which provides the paramaters for the form. This means that before a form is created, the required template is always created first. All created form definition pages are saved in the Form namespace. Subsequent edits to the form definition page have to be made in source editing mode.
  • Application example: info boxes Page Forms is often used to add and edit infoboxes on a wiki page. If Semantic MediaWiki is used, the collected data in the templates can be stored and retrieved.
  • Edit existing forms values via menu item Existing values in a template can be updated using the menu item "Edit with form" of the page edit button, for example.
  • Automatic completion of fields Users Users are offered existing values when entering them, depending on the form input type. This reduces problems with naming ambiguities, spelling, etc.
  • Free text field Free text on the page that is not part of the template itself can be displayed in a separate input field called "Free text" for editing directly in forms mode.

BlueSpice input types

In addition to the default input types, BlueSpice offers the following additional input types:

Input type Result Function
bs-grid input table grid-based input field to combine related paramters.

Table rows can be added with a "+" button. The following templates need to be created:

  • Template for the table row plus its related columns.json page
  • Template for the output of the grid on a wiki page
bs-usercombo User name (with link to the profile page) (Single selection).
bs-usertags Comma-separated user name Menu that allows to select existing wiki users

(multiple selections possible).


Note: To link to the profile page, the corresponding parameter in the template needs to be formated accordingly:


{{#arraymap:{{{myParameter|}}}|,|@@@|[[User:@@@|@@@]]}}

bs-mvvisualeditor Formatted text Text box with simplified VisualEditor.
bsvisualeditor - Obsolete - replaced by bs-mvvisualeditor

bs-grid

Bs-grid provides the possibility to use table rows to collect combined values for a particular parameter:

entering grid-data for a single form field
entering grid-data for a single form field


To create the grid-based form field and its output:

  1. Create the template Template:Products/Row.
    1. Define the parameters, for which to collect values. Gere we create a table row, so that we can later display the collected data as a table:
      <noinclude>Table row for the output of the product data</noinclude><includeonly>
      |-
      |{{{product|}}}
      |{{{department|}}}
      |{{{availDate|}}}
      |{{{sale|}}}
      </includeonly>
      
  2. Define the grid in the page Template:Products/Row/Columns.json:
    [
    {"header":"Product name","dataIndex":"product", "flex":1, "editor":{"allowBlank":false}},
    {"header":"Department","dataIndex":"department","editor":{"xtype":"combo","typeAhead":true,"triggerAction":"all","store":[["Toddler","Toddler"],["Boys","Boys"],["Girls","Girls"],["Men","Men"],["Women","Women"]]}},
    {"xtype":"datecolumn","header":"Available from","dataIndex":"availDate","format":"d.m.Y","editor":{"xtype":"datefield","format":"d/m/y","minValue":"01/01/21"}},
    {"xtype":"checkcolumn","header":"On sale?","dataIndex":"sale","headerCheckbox":true,"stopSelection":false}
    ]
    
    Note: The syntax of this json file is produced by the Ext JS framework. Links to the documentation of the grid syntax are provided under Related info at the end of this page (JS-knowledge required).
  3. Create the page Template:Products. It contains the output format for the data. It is also formatted as a filterable table.
    <noinclude>Output table for product data. 
    The parameter "productdate" is processed in the form Form:Products.
    </noinclude><includeonly>{{#default_form: Products}}
    {| class="wikitable filterable"
    |+Product overview for our current collection
    !Product name
    !Department
    !Available from
    !On sale?
    {{{productdata}}}
    |}
    </includeonly>
    
  4. Create the data entry form Form:Products. The form field productdata defines the data entry type as a table (bs-grid):
    <noinclude>This is the form "Products".It is being used with the template Template:Products.</noinclude><includeonly>
    <div id="wikiPreview" style="display: none; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #AAAAAA;"></div>
    {{{for template|Products}}}
    Products: 
    
    {{{field|productdata|input type=bs-grid|colDef=Template:Products/Row/Columns.json|template=Products/Row}}}
    
    {{{end template}}}
    
    {{{standard input|save}}} {{{standard input|preview}}} {{{standard input|cancel}}}
    </includeonly>

  5. Include the template "Products" on a wiki page.
    1. Click Insert > Template in the editor toolbar.
    2. Enter "Products.
      add the Products template to a page
      add the Products template to a page
    3. Click Add template.
    4. Save the page.
    5. Open the page in form-edit mode (using the drop-down menu next to the "+"-button in the top toolbar.The page open in forms mode. Enter your data in the products grid.
    6. Save the page again. The filterable products table is now shown.
      Output of the grid data for parameter productdata
      Output of the grid data for parameter productdata

      In source code view, the productdata parameter looks like this:
{{Products
|productdata={{Products/Row|product=Trekking pants|department=Men|availDate=30.07.2021|sale=true}}
{{Products/Row|product=Sweater|department=Boys|availDate=04.07.2021}}
{{Products/Row|product=Socks|department=Women|availDate=03.08.2021}}
}}


Special pages

Page Forms defines some special pages that are used for data input and data maintenance.

Among others, the following special pages are important for data collection:

Erweiterung-Page Forms-12190872.drawio.png



Related info