# Changes for page Icon Picker Macro

Last modified by superadmin on 2017/11/28 14:52

#### Export

#### Office Formats

Export as PDF Export as ODT Export as RTF

#### Other Formats

Export as HTML
From empty
To version 1.1
edited by superadmin
on 2017/11/28 14:52
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/9.9]

## Summary

- Page properties (5 modified, 0 added, 0 removed)
- Objects (0 modified, 4 added, 0 removed)
  - XWiki.WikiMacroClass[0]
  - XWiki.WikiMacroParameterClass[0]
  - XWiki.WikiMacroParameterClass[1]
  - XWiki.WikiMacroParameterClass[2]

## Details

Page properties
  Title

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Icon Picker Macro

  Parent

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +IconThemes.WebHome

  Author

    ... | ... | @@ -1,1 +1,1 @@
    1 |  | -XWiki.XWikiGuest
    | 1 | +xwiki:XWiki.superadmin

  Hidden

    ... | ... | @@ -1,1 +1,1 @@
    1 |  | -false
    | 1 | +true

  Content

    ... | ... | @@ -1,0 +1,25 @@
    | 1 | += Usage =
    | 2 | +{{code}}
    | 3 | +{{iconPicker id="" class="" prefix="" /}}
    | 4 | +{{/code}}
    | 5 | +
    | 6 | +**Where:**
    | 7 | +|=id (optional)|DOM id of the input field where the picker will apply
    | 8 | +|=class (optional)|CSS class of inputs where the picker will apply
    | 9 | +|=prefix (optional)|Prefix to add before the name of the icon in the input field (default: "{{{image:icon:}}}")
    | 10 | +== Live example ==
    | 11 | +{{code}}
    | 12 | +{{html}}
    | 13 | + <p>Field 1: <input type="text" id="myPicker" /></p>
    | 14 | + <p>Field 2: <input type="text" class="fieldWithPicker" /></p>
    | 15 | +{{/html}}
    | 16 | +
    | 17 | +{{iconPicker id="myPicker" class="fieldWithPicker" prefix="icon:" /}}
    | 18 | +{{/code}}
    | 19 | +== Play with it ==
    | 20 | +{{html}}
    | 21 | + <p>Field 1: <input type="text" id="myPicker" /></p>
    | 22 | + <p>Field 2: <input type="text" class="fieldWithPicker" /></p>
    | 23 | +{{/html}}
    | 24 | +
    | 25 | +{{iconPicker id="myPicker" class="fieldWithPicker" prefix="icon:" /}}

XWiki.WikiMacroClass[0]
  Macro code

    ... | ... | @@ -1,0 +1,33 @@
    | 1 | +{{velocity output="false"}}
    | 2 | + $xwiki.ssx.use('IconThemesCode.IconPicker')
    | 3 | + ## The icons themes may need some SSX, so we ask for a rendering of an icon of each icon theme, to be able to display
    | 4 | + ## all icon themes in the picker
    | 5 | + ## ToDo: since it is a bit hacky, a better system would be to dynamically load the needed SSX on demand
    | 6 | + #foreach($iconSetName in $services.icon.iconSetNames)
    | 7 | + $services.icon.render('wiki', $iconSetName)
    | 8 | + #end
    | 9 | +{{/velocity}}
    | 10 | +
    | 11 | +{{velocity}}
    | 12 | +{{html clean="false"}}
    | 13 | +<script language="javascript">
    | 14 | + require.config({
    | 15 | + paths: {
    | 16 | + 'xwiki-icon-picker': '$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!{escapetool.url($request.minify)}")'
    | 17 | + }
    | 18 | + });
    | 19 | + require(['jquery', 'xwiki-icon-picker'], function($) {
    | 20 | + var options = {};
    | 21 | + #if($xcontext.macro.params.parameterNames.contains('prefix'))
    | 22 | + options['prefix'] = '$escapetool.javascript($xcontext.macro.params.prefix)';
    | 23 | + #end
    | 24 | + #if("$!xcontext.macro.params.id" != '')
    | 25 | + $('#${xcontext.macro.params.id}').xwikiIconPicker(options);
    | 26 | + #end
    | 27 | + #if("$!xcontext.macro.params.get('class')" != '')
    | 28 | + $('.${xcontext.macro.params.get('class')}').xwikiIconPicker(options);
    | 29 | + #end
    | 30 | + });
    | 31 | +</script>
    | 32 | +{{/html}}
    | 33 | +{{/velocity}}

  Macro content type

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No content

  Default category

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Development

  Macro description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Select an icon within the XWiki icon set.

  Macro id

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +iconPicker

  Macro name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Icon Picker

  Supports inline mode

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Yes

  Macro visibility

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Current Wiki

XWiki.WikiMacroParameterClass[0]
  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +DOM id of the input field where the picker will apply

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +id

XWiki.WikiMacroParameterClass[1]
  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +CSS class of inputs where the picker will apply

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +class

XWiki.WikiMacroParameterClass[2]
  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Prefix to add before the name of the icon in the input field (default: "image:icon:")

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +prefix

# Applications

# Tips

You can click on the arrows next to the breadcrumb elements to quickly navigate to sibling and children pages.

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support