• Uikit Bodytext {• In contrast to the RepeaterMatrix, inputfields for items used in RepeaterFlex need to be declared with an...}
  • loaded_repeater1488
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1488
  • • Bodytext
      <p>In contrast to the RepeaterMatrix, inputfields for items used in RepeaterFlex need to be declared with an associative array. Each key specifies the name of a field, the associated value define additional attributes. Each RepeaterFlex item plugin must implement a static method <span class="highlight-php">getFields()</span> to advertize the requested fields. If no fields are needed, implementing this method may be omitted, though.</p> <p>Fields may be specified in two flavors. The simpler form just use the name of an already existing field, if no adjustments need to be done, the value array may be left empty. Such a minimal, yet complete, specification may look like this:</p> <pre class="dark"> <code class="language-php language-php"> public static function getFields() { return [ // Refer to an existing field, use it as is. 'email' =&gt; [ ], ]; }</code></pre> <p>Please note that using the system field <span class="highlight-php">email</span> really is a bad example in this case. You should avoid adding this field to a repeater, since it will be preloaded (along with some bound system fields) with each repeater item, this slows down repeater enumeration significantly (also for regular Repeater and RepeaterMatrix).</p> <p>Let's take a look at the value array next, which defines additional information for this field. For now we'll look at the key 'context' first, which allows to overwrite nearly any aspect of an existing field, similar to what you do when adjusting field attributes in your template definition. The most interesting attributes are probably 'label' and 'columnWidth', like we do in our next example:</p> <pre class="dark"> <code class="language-php language-php"> // Refer to an existing field, but change some attributes 'roles' =&gt; [ 'context' =&gt; [ 'label' =&gt; __("Select allowed roles"), 'description' =&gt; __("Select roles allowed to use this field, others will see an error message!"), 'columnWidth' =&gt; 25, ], ],</code></pre> <p>Please note that the <span class="highlight-php">roles</span> field is flagged permanent. Once added to the repeater's template, it can not be removed. While this is totally uncritical, you'll just get a warning when removing a plugin using this field from the RepeaterFlex.</p> <p>This already is a pretty powerful approach, which allows re-use most fieldtypes and tweak their attributes to match your needs. If you prefer, you may create any required field the usual way first and keep the definition simply as these. But if you intend to migrate a plugin into a second installation, you'll have to create the field first so the plugin may refer to it. You may use the JSON Field-Exporter/-Importer of ProcessWire to simplify field migration a little. But be aware this does not work with option fields, may fail due to duplicated field ids and maybe more.</p> <pre> { "header_type": { "id": 152, "type": "FieldtypeOptions", "flags": 0, "name": "header_type", "label": "Paragraph Type", "inputfieldClass": "InputfieldSelect", "required": 1, "defaultValue": "p", "columnWidth": 25, "initValue": "", "collapsed": 0, "showIf": "", "themeInputSize": "", "themeInputWidth": "", "themeOffset": "", "themeBorder": "", "themeColor": "", "requiredIf": "", "export_options": { "default": "1=p|Standard\n2=h1|Header1\n3=h2|Header2\n4=h3|Header3\n5=h4|Header4\n6=h5|Header5" } } }</pre> <p>So, why not just take the exported script and let RepeaterFlex do the import for you? This is the responsibility of the 'setup' key, which looks rather similar to an exported script, but you'll need to translate the JSON format into a PHP array, so replace colons with '=&gt;' and curly braces with brackets. Additionally you want to remove entries 'id', 'flags', 'name' and probably all defaults (set to 0 or "") and if its an Options field you'll need to transcode the "export_options" into an associative array as well. In the end this may look like this:</p> <pre class="dark"> <code class="language-php language-php"> // Refer to a real field, create if it does not exist 'header_type' =&gt; [ 'context' =&gt; [ 'columnWidth' =&gt; 25, ], 'setup' =&gt; [ // may be used to create fields automatically 'type' =&gt; 'FieldtypeOptions', 'label' =&gt; __('Paragraph Type'), 'inputfieldClass' =&gt; 'InputfieldSelect', 'required' =&gt; 1, 'defaultValue' =&gt; 'p', 'initValue' =&gt; '', 'columnWidth' =&gt; 25, 'options' =&gt; [ 1 =&gt; 'p|'.__('Standard'), 2 =&gt; 'h1|'.__('Header1'), 3 =&gt; 'h2|'.__('Header2'), 4 =&gt; 'h3|'.__('Header3'), 5 =&gt; 'h4|'.__('Header4'), 6 =&gt; 'h5|'.__('Header5'), ], ], ],</code></pre> <p>When you add a plugin with such a definition to your RepeaterFlex field, then the field 'header_type' will be created on the fly, which simplifies re-use of plugins significantly.</p> <p>Of course you still may run into issues, if the system already has a field with the same name but totally different use. Then you either need to modify the script or rename your system field, so there still is room for improvement.</p> <p>With the availability to teak field attributes using the 'context' array, why not generally refer only to existing fieldtypes but using a fixed name in your script?</p> <p>Let's say, you need a simple, non-markup textfield which probably exists in any PW installation. What if we simply describe our requirements and let the user pick a field when configuring the RepeaterFlex field. That's what I call a virtual field.</p> <p>Such a virtual field is identified using the prefix @ before the name and the existence of keys 'hint' and 'fieldtype' in its configuration. Something like this:</p> <pre class="dark"> <code class="language-php language-php"> // Define a textfield for markup using field Prototypes in RepeaterFlexItem, specify label only '@TextOnly' =&gt; [ 'fieldtype' =&gt; 'Text', 'hint' =&gt; __('Select a plain Textfield without markup'), 'context' =&gt; [ 'label' =&gt; __('Info for restricted roles'), 'required' =&gt; 1, 'columnWidth' =&gt; 25, ], ],</code></pre> <p>The 'fieldtype' specification is used to filter selectable fields during configuration, the 'hint' is displayed next to the selection, which we'll see soon. Inside the render method this field is referenced using $pg-&gt;TextOnly, regardless how it is named in the system.</p> <p>Please note that for technical reasons the first character is responsible to decide if name mapping actually takes place or not. Fieldnames starting with an uppercase letter will be translated, according to the mapping, lowercase names refer to native fields.</p>
• Uikit Bodytext {• While all these methods work with nearly any field, tweaking attributes will fail with any kind of Options...}
  • loaded_repeater1509
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1509
  • • Bodytext
      <p>While all these methods work with nearly any field, tweaking attributes will fail with any kind of Options field, since options are finally managed from the database, so redefinition of options during runtime is not possible. For this reason the RepeaterFlex comes with a very special fieldtype named FieldtypeOptionsFlex. This fieldtype is tightly bound to the RepeaterFlex, since it pulls the options from the plugin directly which allow re-configuration during runtime and therefore re-use of such fields. In comparison to the TextOnly field we basically add an 'options' key:</p> <pre class="dark"> <code class="language-php language-php"> // Define an option field using field Prototypes in RepeaterFlexItem '@ColorOption' =&gt; RepeaterFlexItem::Options([ 'columnWidth' =&gt; 25, 'label' =&gt; __("Message color"), 'inputfieldClass' =&gt; 'InputfieldSelect', 'required' =&gt; 1, 'defaultValue' =&gt; '1', 'columnWidth' =&gt; 25, 'options' =&gt; [ 1 =&gt; [ 'color' =&gt; '#F00', 'title' =&gt; __('red') ], 2 =&gt; [ 'color' =&gt; '#0F0', 'title' =&gt; __('green') ], 3 =&gt; [ 'color' =&gt; '#00F', 'title' =&gt; __('blue') ], 4 =&gt; [ 'color' =&gt; '#000', 'title' =&gt; __('black') ], ], ]),</code></pre> <p>We need to focus on three points here, let's start with the 'options' array. In constrast to the options definition for the 'header_type' above, the values are associative arrays again. While a 'title' field is mandatory per entry, you are totally free to pack whatever you need into each option. To retrieve currently selected color and title, just use <span class="highlight-php">$pg-&gt;ColorOption-&gt;color</span> and <span class="highlight-php">$pg-&gt;ColorOption-&gt;title</span>, respectively. If you only need 'value' and 'title', you may stay with the string argument.</p> <p>The second notable point is 'inputfieldClass', which specifies the kind of input control. You may use InputfieldSelect and InputfieldRadios for single selection and InputfieldCheckboxes, InputfieldMultiSelect and InputfieldAsmSelect for multi-selections. In contrast to "real" Options fields, the FieldtypeOptionsFlex allows this configuration during runtime and only during runtime.</p> <p>And finally, the most interesting difference to our TextOnly field is the lack of a 'context' key and call to a static method <span class="highlight-php">RepeaterFlexItem::Options</span> from the baseclass. There are several similar methods for most common fieldtypes which only take a single context array and return the complete field specification. So you do not copy&amp;paste 'hint' and 'fieldtype' for each new field:</p> <pre class="dark"> <code class="language-php language-php">RepeaterFlexItem::TextMarkup($opt=null); // Single Textline with Markup RepeaterFlexItem::TextAreaMarkup($opt=null) // Textline which returns Markup RepeaterFlexItem::TextOnly($opt=null) // Plain Textline without Markup (i.e. options, classes, configuration) RepeaterFlexItem::TextArea($opt=null) // Plain TextArea RepeaterFlexItem::Url($opt=null) // A field for a URL RepeaterFlexItem::Image($opt=null) // A field for a single image RepeaterFlexItem::Images($opt=null) // A field for multiple images RepeaterFlexItem::Options($opt=null) // A field of FieldtypeOptionsFlex RepeaterFlexItem::PageSelect($opt=null) // A Page Selector RepeaterFlexItem::Checkbox($opt=null) // A single Checkbox RepeaterFlexItem::Percent($opt=null) // A numerical percentage value</code></pre> <p>The <span class="highlight-php">$opt</span> parameter may be a regular 'context' array, a string, which would define the label or an integer to specify the columnWidth. So a probably most simple virtual field definition may look like this:</p> <pre class="dark"> <code class="language-php language-php"> // Define a virtual field using field prototype from RepeaterFlexItem and specify only the title. '@FancyImages' =&gt; RepeaterFlexItem::Images(__('Upload only nice pictures!')),</code></pre> <p> </p>
• Uikit Bodytext {• When using this plugin the first time, the configuration will detect missing fields, so you'll see something...}
  • loaded_repeater1510
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1510
  • • Bodytext
      <p>When using this plugin the first time, the configuration will detect missing fields, so you'll see something like this:</p>
• UiKit Image {• Media(pluginwithfields.png), shadow medium shadow bottom, }
  • loaded_repeater1511
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1511
  • • Single Image
      • Dimensions	1289x167
        Filesize	11 kB
        Variations	3

        
        Edit

        pluginwithfields.png

        11 kB, 1289×167

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow mediumshadow bottom
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Uikit Bodytext {• Submitting the form will not only install the header_type field:}
  • loaded_repeater1512
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1512
  • • Bodytext
      <p>Submitting the form will not only install the header_type field:</p>
• UiKit Image {• Media(pluginwithfieldsadded.png), shadow medium shadow bottom, }
  • loaded_repeater1513
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1513
  • • Single Image
      • Dimensions	623x323
        Filesize	11 kB
        Variations	3

        
        Edit

        pluginwithfieldsadded.png

        11 kB, 623×323

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow mediumshadow bottom
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Uikit Bodytext {• but also opens two new assignment fields for FancyImages and ColorOption:}
  • loaded_repeater1514
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1514
  • • Bodytext
      <p>but also opens two new assignment fields for FancyImages and ColorOption:</p>
• UiKit Image {• Media(pluginwithfieldsassigned.png), shadow medium shadow bottom, }
  • loaded_repeater1515
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1515
  • • Single Image
      • Dimensions	1239x187
        Filesize	15 kB
        Variations	3

        
        Edit

        pluginwithfieldsassigned.png

        15 kB, 1239×187

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow mediumshadow bottom
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Uikit Bodytext {• Please note that the system actually didn't query for the TextOnly field, since this already was assigned as...}
  • loaded_repeater1517
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1517
  • • Bodytext
      <p>Please note that the system actually didn't query for the TextOnly field, since this already was assigned as it is used from multiple other fields.</p> <p>By the way, if you ever want to know the mapping for a particular plugin, checkout the verbose field on top of the RepeaterFlex configuration. Our new FlexFieldsDemo state this:</p>
• UiKit Image {• Media(pluginwithfieldsverbose.png), shadow medium shadow bottom, }
  • loaded_repeater1518
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1518
  • • Single Image
      • Dimensions	415x147
        Filesize	6 kB
        Variations	2

        
        Edit

        pluginwithfieldsverbose.png

        6 kB, 415×147

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow mediumshadow bottom
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Uikit Bodytext {• Now, that we added and configured this field to our RepeaterMatrix successfully, let's do some input:}
  • loaded_repeater1523
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1523
  • • Bodytext
      <p>Now, that we added and configured this field to our RepeaterMatrix successfully, let's do some input:</p>
• UiKit Image {• Media(pluginwithfieldsadmin.png), shadow medium shadow bottom, }
  • loaded_repeater1521
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1521
  • • Single Image
      • Dimensions	1515x691
        Filesize	244 kB
        Variations	5

        
        Edit

        pluginwithfieldsadmin.png

        244 kB, 1515×691

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow mediumshadow bottom
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Uikit Bodytext {• And finally have a quick look at the render method, so you get an idea what this field actually should do:}
  • loaded_repeater1519
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1519
  • • Bodytext
      <p>And finally have a quick look at the render method, so you get an idea what this field actually should do:</p>
• Sourcefile {• Open Modal: plugins/ContentRenderer/FlexFieldsDemo.inc }
  • loaded_repeater1490
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1490
  • • Path to Sourcefile

      relative path from ModuleRepeaterFlex plugins/FlexSourcefile.flex

    • Source use
      Embed source codeHidden source codeOpen ModalDownload only
• Uikit Bodytext {• public function render(Page $pg) $user = wire('user'); // Obtain current user $bOk = false...}
  • loaded_repeater1520
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1520
  • • Bodytext
      <pre class="dark"> <code class="language-php language-php"> public function render(Page $pg) { $user = wire('user'); // Obtain current user $bOk = false; foreach($pg-&gt;roles as $role) // Enumerate selected roles... { if($user-&gt;hasRole($role)) // ...and check if the current user has at least one of them. $bOk = true; } if(!$bOk) // User does not have any of the allowed roles, output the configured warning. { $Tag = $this-&gt;ctx-&gt;getTag($pg-&gt;header_type-&gt;value); $Tag-&gt;addAttributes([ 'style' =&gt; "color:{$pg-&gt;ColorOption-&gt;color};" ]); return($Tag-&gt;getOpenTag() . $pg-&gt;TextOnly . $Tag-&gt;getCloseTag()); } // User has at least one allowed role, output images as thumbnails $out = '&lt;div&gt;'; foreach($pg-&gt;FancyImages as $img) $out .= '&lt;img src="'.$img-&gt;size(300,300)-&gt;url.'"/&gt;'; $out .= '&lt;/div&gt;'; return($out); }</code></pre> <p>I guess, there is little to explain. In case you are a logged in user, you'll see this a second time below:</p>
• UiKit Image {• Media(pluginwithfieldsallowed.png), shadow bottom shadow medium, }
  • loaded_repeater1524
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1524
  • • Single Image
      • Dimensions	1211x309
        Filesize	941 kB
        Variations	4

        
        Edit

        pluginwithfieldsallowed.png

        941 kB, 1211×309

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
    • UiKit Utilities
      leftcenterrightpanelpanel scrollablefloat leftfloat rightdisplay as blockdisplay as inlinedisplay as inline blockborder roundedborder circleborder pillshadow smallshadow largeshadow xlargeshadow bottomshadow medium
    • UiKit Image Size
      1-1@s1-2@s1-3@s1-4@s1-5@s1-6@s1-1@m1-2@m1-3@m1-4@m1-5@m1-6@m1-1@l1-2@l1-3@l1-4@l1-5@l1-6@l1-1@xl1-2@xl1-3@xl1-4@xl1-5@xl1-6@xl1-11-21-31-41-51-6
    • Enable Slideshow
      Enable Slideshow
    • Disable Lazy Loading
      Disable Lazy Loading
• Flex Fields Demo {• 4 Images, Roles: superuser visitor, Sorry, not enough rights, Header2/red }
  • loaded_repeater1522
  • Depth
  • Sort
  • Delete
    Delete
  • publish_repeater1522
  • • Select allowed roles

      Select roles allowed to use this field, others will see an error message!

      • guest
      • superuser
      • login-register
      • visitor
    • Paragraph Type
      StandardHeader1Header2Header3Header4Header5
    • Info for restricted roles
    • Message color
      redgreenblueblack
    • Upload only nice pictures!
      • Dimensions	800x533
        Filesize	223 kB
        Variations	2

        
        Edit

        motiv79089.jpg

        223 kB, 800×533

        Description

      • Dimensions	800x533
        Filesize	280 kB
        Variations	2

        
        Edit

        nature92836.jpg

        280 kB, 800×533

        Description

      • Dimensions	800x533
        Filesize	214 kB
        Variations	2

        
        Edit

        nature93901.jpg

        214 kB, 800×533

        Description

      • Dimensions	800x533
        Filesize	178 kB
        Variations	2

        
        Edit

        nature96430.jpg

        178 kB, 800×533

        Description
      drop in new image file to replace drag circle to center of focus

      Choose File

      gif, jpg, jpeg, png  drag and drop in new images above
• Flex Content #21 {• This item will become editable after you save.}

Add New  Uikit Container  Uikit Div  Uikit Grid  Uikit Bodytext  Uikit Card  UiKit Image  Accordion Container  Accordion Entry  Single Line  Horizontal Ruler  Uikit ScrollSpy  Uikit Slideshow  UiKit UL List  Flex Fields Demo  HTML5 Video  Simple MapBox Viewer  Child Links  Sourcefile
Uikit Container
Uikit Div
Uikit Grid
Uikit Bodytext
Uikit Card
UiKit Image
Accordion Container
Accordion Entry
Single Line
Horizontal Ruler
Uikit ScrollSpy
Uikit Slideshow
UiKit UL List
Flex Fields Demo
HTML5 Video
Simple MapBox Viewer
Child Links
Sourcefile