2.2.7 Content droplets

Revision as of 08:46, 14 August 2023

To insert additional functionality in a wiki page, you can use Content droplets. Content droplets include tags that were previously accessed from Insert > Magic word in the editor toolbar. They also provide access to some templates that are preconfigured in the wiki, such as message boxes.

Adding a droplet to a page

To add a droplet to a page:

Click the Content droplets icon in the editor toolbar or type <<.
Search for a droplet name in the search bar of the droplets menu or browse the droplets by category.
Select a droplet
Click Insert.

Note:Some droplets open an inspector menu which contains another Insert button. Be sure to confirm that button as well.

Based on the type of droplet, you can continue with configuring the droplet as needed.

List of droplets

Droplet	Description	Inserts the following in the page source:
Attachments Attachments output	Area for organising attachments	`<attachments title="Attachments area">` `* [[Media:Financial_Sample.xlsx]]` `</attachments>`
Booklist	List of books based on a filter value. The value needs to be defined as a metadata in the book settings.	`<bs:booklist filter="Author:WikiSysop" />`
BPMN diagram BPMN diagram	Editable BPMN diagram	`<bpmn name="Test:Erm31642" />`
Button Links styled as buttons	Link that is styled as a button	`{{ButtonLink\|target=Main Page\|label=click me!\|format=blue}}`
Categorytree	Selected categories are shown in a tree structure	`<categorytree>TestCat</categorytree>`
Checkbox	Checkbox that can be checked in view mode	`<bs:checkbox checked="true" />`
Checklist	List that allows to set a value in view mode	`<bs:checklist type="list" checked="true" list="Template:Status" value="Select status" />`
Chemical formula Chemical formula	Display of chemical formulas	`<chem>H2O</chem>`
Circled number	Number in a circle with customizable color	`{{CircledNumber\|bgColor=black\|fgColor=yellow\|number=180}}`
Code Code area for a css example	Highlighted section for code examples	`<syntaxhighlight lang="css">` `.hi {background:blue;}` `</syntaxhighlight>`
Create page	Form field for predefined page creation	`{{CreateInput\|alignment=left\|buttonlabel=Create}}`
Data query	Enables queries on content in the wiki	`{{SMWReport\|count=10}}`
Decision Decision output	Highlights a decision as a page property	`{{Decision\|decision=Eat more veggies}}{{Decision\|decision=Buy new car}}`
Diagram Drawio diagram	Editable draw.io diagram	`<drawio filename="Mydiagram">`
Gallery Gallery	Displays an image gallery	`<gallery>` `File:test1.png` `File:test.pdf` `</gallery>`
Icon Icons template	Inserts an icon	`{{Icon\|bi bi-arrow-left-circle}}`
Important Message Message of type "important"	Adds colored panel for a important note	`{{Textbox\|boxtype=important\|header=OMG\|text=Important\|icon=yes}}`
Links to this page	List of pages that link to this page	`{{Whatlinkshere\|count=5\|sort=time\|order=DESC}}`
List of users logged in	Pop-up with a list of all users that are currently logged in	`<bs:whoisonlinepopup />`
Map Map output with text marker	Locations can be marked on the map	`{{Map\|Munich ~ Hello there!\|Munich, Germany}}`
Mathematical formula Screenshot of a math formula	Display of mathematical formulas	`<math>\tfrac{2}{4}</math>`
Member list	List of members of a wiki group	`<bs:userlist groups="sysop" count="6" />`
Message A plain message	Adds text panel	`{{Textbox\|boxtype=neutral\|header=\|text=SDadad\|icon=no}}`
Modal button	Configurable button which opens a customizable modal dialogue	`{{ModalDialog\|title=I am a dialog\|btnLabel=click me!\|body=This is the text\|footer=hello world}}`
Most visited pages	List of the most visited wiki pages	`<bs:toplist count="3" period="-" />`
New users	List of new users in the wiki	`<bs:newbies count="4" />`
Note Message Message of type "Note"	Adds colored panel for a note	`{{Textbox\|boxtype=note\|header=\|text=sfsadfasfdsdaf\|icon=yes}}`
Number of characters	Shows the number of characters or words in a wiki page	`<bs:countcharacters />`
Number of files	Shows the number of all uploaded files	`<bs:countfiles />`
Number of pages	Shows the number of pages	`<bs:countarticles />`
Number of users	Shows the number of all users	`<bs:countusers />`
Number of users logged in	Number of currently logged in users	`<bs:whoisonlinecount />`
Page access Page access notification banner	Restricts access to the page to the specified groups	`<bs:pageaccess groups="sysop" />`
PDF link	Link that downloads another wiki page as PDF	`{{PDFLink\|page=Main Page\|template=BlueSpice\|label=PDF Link}}`
PDF page break	Forces a page break at the set position during PDF export	`<bs:uepagebreak />`
PDF preview	Embed preview of a PDF file	`<pdf height="800">File:Raspberry_pi.pdf</pdf></code>`
PDF no export	Content within this section is excluded from the PDF export	`<bs:uenoexport>Don't export this text</bs:uenoexport>`
Progress	Visualizes progress against given measurement variables	`<bs:statistics:progress basecount="2" progressitem="OK" width="150" baseitem="Status:" />`
Pros and cons Pros and cons	Table for comparing pros and cons	`{{ProConList\|title-advantages=Advantages\|title-disadvantages=Disadvantages\|advantages=* It is cheap\|disadvantages=* It is sold out}}`
Recent changes	List of recently changed pages	`{{RecentChanges\|count=5}}`
Signature Signatures button	A button to add signatures in view mode	`<bs:signhere />`
Search field Search field	Adds a search field to the page content	`<bs:tagsearch type="wikipage" namespace="QM" />`
Subpages	List of the subpages of a wiki page	`{{Subpages\|parentpage=Mypage}}`
Success Message Message of type "success"	Adds colored panel for a success note	`{{Textbox\|boxtype=success\|header=OMG\|text=It works\|icon=yes}}`
Tag cloud	Tag cloud based on categories or search queries	`<bs:tagcloud renderer="list" store="category" />`
Tip Message Message of type "tip"	Adds colored panel for a tip	`{{Textbox\|boxtype=tip\|header=Tip\|text=sfsadf\|icon=yes}}`
User profile User profile of type "Short"	A user profile will be included on this page	`<bs:socialentityprofile username="WikiSysop" rendertype="Short" />`
Video	Embeds video from different external platforms (YouTube)	`<embedvideo service="youtube">JILEkPu61Ao</embedvideo>`
Visited pages	List with visited pages	`<bs:pagesvisited count="7" maxtitlelength="40" order="time" />`
Warning Message Message of type "warning"	Adds a colored box for a warning note	`{{Textbox\|boxtype=warning\|header=Hello\|text=\|icon=yes}}`
Watchlist	Latest changes to pages included in your watch list	`<bs:watchlist count="5" maxtitlelength="20" order="time" />`

Example outputs

Button

My page

Data query

Inspector settings

setting	value	description
Category	Administration, Customization	the returned pages need to be in one of these categories (optional)
Namespace	Main, Manual	the returned pages need to be in one of these namespaces (optional)
Modified	All, Since, Before	sets a date filter
Printout statements	Last editor is\|Modification date	adds page properties in parentheses
Format	Bulleted list, numbered list	the output is in one of two lists formats
Number	6	Number of pages that are returned

Output

2-Factor-Authentication (2FA) (Last editor is: User:Margit.link-rodrigue, Modification date: 28 July 2022 16:08:12)
AI Assistant (Last editor is: User:Margit.link-rodrigue, Modification date: 29 July 2024 08:57:22)
Admin Manual Introduction (Last editor is: User:Richard.heigl, Modification date: 06 December 2023 18:32:54)
All topics (Last editor is: User:Margit.link-rodrigue, Modification date: 27 October 2022 08:27:19)
Avatars (Last editor is: User:Margit.link-rodrigue, Modification date: 02 May 2023 14:55:03)
Blog (Last editor is: User:Margit.link-rodrigue, Modification date: 03 November 2023 12:34:31)

Modal button

Google.com

PDF preview

Progress

Inspector

setting	value	description
Base count	5	number of items that are counted to reach 100%
Base item	Is:	prefix that specifies the progress item. If you do not provide a base item, the progress item could be to unspecific
Progress item	closed	item that will be counted towards the base count
Width	300	width in pixels

Output

100.0%

This is my topic 1 (Statecheck:open)
This is my topic 2 (Statecheck:closed)
This is my topic 3 (Statecheck:closed)
This is my topic 4 (Statecheck:closed)
This is my topic 5 (Statecheck:closed)

Pros and cons

Advantages	Disadvantages
affordable well-known easily accessible	somewhat dated look and feel not customizable GDPR compliance unclear

Tip Message

This is a tip message.

Watchlist

Shows the current user the most recently changed pages that are on their watchlist:

Watchlist cannot be displayed because no user is logged in

Technical Reference: ContentDroplets

To submit feedback about this documentation, visit our community forum.

@@ Line 7: / Line 7: @@
 To add a droplet to a page:
-# '''Click''' the Content droplets icon in the editor toolbar.
+# '''Click''' the Content droplets icon in the editor toolbar or type <code><nowiki><<</nowiki></code>.
-# '''Search''' for a droplet name in the search bar of the droplets menu or browse the droplets by category.[[File:droplet menu.png|none|thumb|550x550px]]
+#'''Search''' for a droplet name in the search bar of the droplets menu or browse the droplets by category.[[File:droplet menu.png|none|thumb|550x550px]]
-# '''Select''' a droplet
+#'''Select''' a droplet
-# '''Click''' ''Insert''.
+#'''Click''' ''Insert''.
-{{Messagebox|boxtype=note|icon=|Note text=Some droplets open an inspector menu which contains another ''Insert'' button. Be sure to confirm that button as well.|bgcolor=}} Based on the type of droplet, you can continue with configuring the droplet as needed.
+{{Messagebox|boxtype=note|icon=|Note text=Some droplets open an inspector menu which contains another ''Insert'' button. Be sure to confirm that button as well.|bgcolor=}}
+Based on the type of droplet, you can continue with configuring the droplet as needed.
-== List of droplets ==
+==List of droplets==
 <containerfilter selector=".wikitable tr">
@@ Line 31: / Line 32: @@
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Booklist
-| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of books based on a filter value
+| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of books based on a filter value. The value needs to be defined as a metadata in the book settings.
 |<code><nowiki><bs:booklist filter="Author:WikiSysop" /></nowiki></code>
 |-
-| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Extension:Cognitive_Process_Designer|BPMN diagram]] {{PopImg|file=Manual:bpmn-UserFeedback.svg|alt=Screenshot of a BPMN diagram|caption=BPMN diagram|width=600}}
+| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Extension:Cognitive_Process_Designer#Usage|BPMN diagram]] {{PopImg|file=Manual:bpmn-UserFeedback.svg|alt=Screenshot of a BPMN diagram|caption=BPMN diagram|width=600}}
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Editable BPMN diagram
 |<code><nowiki><bpmn name="Test:Erm31642" /></nowiki></code>
@@ Line 86: / Line 87: @@
 |<code><nowiki><drawio filename="Mydiagram"></nowiki></code>
 |-
-| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[mediawikiwiki:Help:Images#Gallery_syntax|Gallery]] {{PopImg|file=droplet gallery.png|alt=Example of a gallery with three fish|caption=Gallery|width=}}
+| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" | [[mediawikiwiki:Help:Images#Gallery_syntax|Gallery]] {{PopImg|file=droplet gallery.png|alt=Example of a gallery with three fish|caption=Gallery|width=}}
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Displays an image gallery
 |<code><nowiki><gallery></nowiki></code>
@@ Line 128: / Line 129: @@
 |<code><nowiki>{{Textbox|boxtype=neutral|header=|text=SDadad|icon=no}}</nowiki></code>
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/ContentDroplets#Modal button|Modal button]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Configurable button which opens a customizable modal dialogue
 |<code><nowiki>{{ModalDialog|title=I am a dialog|btnLabel=click me!|body=This is the text|footer=hello world}}</nowiki></code>
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList#Toplist|Most visited pages]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of the most visited wiki pages
 |<code><nowiki><bs:toplist count="3" period="-" /></nowiki></code>
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList|New users]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of new users in the wiki
 |<code><nowiki><bs:newbies count="4" /></nowiki></code>
 |-
@@ Line 160: / Line 161: @@
 |<code><nowiki><bs:countusers /></nowiki></code>
 |-
-| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Reference:BlueSpiceWhoIsOnline|Number of users logged in]]
+| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" | [[Reference:BlueSpiceWhoIsOnline|Number of users logged in]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Number of currently logged in users
 |<code><nowiki><bs:whoisonlinecount /></nowiki></code>
@@ Line 184: / Line 185: @@
 |<code><nowiki><bs:uenoexport>Don't export this text</bs:uenoexport></nowiki></code>
 |-
-| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/ContentDroplets#Progress|Progress]]
+| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" | [[Manual:Extension/ContentDroplets#Progress|Progress]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Visualizes progress against given measurement variables
 |<code><nowiki><bs:statistics:progress basecount="2" progressitem="OK" width="150" baseitem="Status:" /></nowiki></code>
@@ Line 192: / Line 193: @@
 |<code><nowiki>{{ProConList|title-advantages=Advantages|title-disadvantages=Disadvantages|advantages=* It is cheap|disadvantages=* It is sold out}}</nowiki></code>
 |-
-| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/BlueSpiceSmartList|Recent changes]]
+| style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" | [[Manual:Extension/BlueSpiceSmartList|Recent changes]]
 | style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |List of recently changed pages
 |<code><nowiki>{{RecentChanges|count=5}}</nowiki></code>
@@ Line 225: / Line 226: @@
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Manual:Extension/EmbedVideo|Video]]
-| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Embeds video from different platforms
+| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Embeds video from different external platforms (YouTube)
 |<code><nowiki><embedvideo service="youtube">JILEkPu61Ao</embedvideo></nowiki></code>
 |-
@@ Line 233: / Line 234: @@
 |-
 | style="width:190px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |[[Templates download/Messagebox|Warning Message]]{{PopImg|file=message-warning.png|alt=Screenshot of a warning message|caption=Message of type "warning"}}
-| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds colored panel for a warning note
+| style="width:380px;box-sizing:border-box;border:1px solid rgb(162, 169, 177);break-inside:avoid;padding:8px;" |Adds a colored box for a warning note
 |<code><nowiki>{{Textbox|boxtype=warning|header=Hello|text=|icon=yes}}</nowiki></code>
 |-
@@ Line 241: / Line 242: @@
 |}
-== Example outputs ==
+== Example outputs==
-=== Button ===
+===Button===
 {{ButtonLink|external=no|target=Main Page|label=My page|format=blue}}
-=== Data query ===
+===Data query===
 '''Inspector settings'''
 {| class="wikitable"
@@ Line 256: / Line 257: @@
 |the returned pages need to be in one of these categories (optional)
 |-
 |Namespace
 |Main, Manual
 |the returned pages need to be in one of these namespaces (optional)
 |-
-|Modified
+| Modified
 |All, Since, Before
 |sets a date filter
 |-
 |Printout statements
@@ Line 268: / Line 269: @@
 |adds page properties in parentheses
 |-
 |Format
 |Bulleted list, numbered list
 |the output is in one of two lists formats
 |-
 |Number
@@ Line 279: / Line 280: @@
 <dataquery namespaces="Manual" modified="+" printouts="Last editor is|Modification date" format="ul" count="6" />
-=== Modal button ===
+===Modal button===
 {{ModalDialog|title=Legal notice|btnLabel=Google.com|body=You are leaving this website. We are not responsible for any content beyond this point.
@@ Line 285: / Line 286: @@
-=== PDF preview ===
+===PDF preview===
 <pdf height="800">File:Raspberry_pi.pdf</pdf>
-===Progress===
+=== Progress===
 Inspector
 {| class="wikitable"
 !setting
 !value
 !description
 |-
-|Base count
+| Base count
 |5
-|number of items that are counted to reach 100%
+| number of items that are counted to reach 100%
 |-
 |Base item
 |Is:
 |prefix that specifies the progress item. If you do not provide a base item, the progress item could be to unspecific
 |-
@@ Line 325: / Line 326: @@
 * GDPR compliance unclear}}
-===Tip Message===
+=== Tip Message===
 {{Textbox|boxtype=tip|header=|text=This is a tip message.|icon=yes}}
-=== Watchlist ===
+===Watchlist===
 Shows the current user the most recently changed pages that are on their watchlist:<bs:watchlist count="5" maxtitlelength="100" order="time" />
 {{translation}}