Mystique (Fieldtype, Inputfield) build dynamic fields and store data by using config file

[ukyo]

Mystique Module for ProcessWire CMS/CMF

Github repo : https://github.com/trk/Mystique

Mystique module allow you to create dynamic fields and store dynamic fields data on database by using a config file.

Requirements

• ProcessWire 3.0 or newer
• PHP 7.0 or newer
• FieldtypeMystique
• InputfieldMystique

Installation

Install the module from the modules directory:

Via Composer:

composer require trk/mystique

Via git clone:

cd your-processwire-project-folder/
cd site/modules/
git clone https://github.com/trk/Mystique.git

Module in live reaction with your Mystique config file

This mean if you remove a field from your config file, field will be removed from edit screen. As you see on youtube video.

Using Mystique with your module or use different configs path, autoload need to be true for modules

Default configs path is site/templates/configs/, and your config file name need to start with Mystique. and need to end with .php extension.

Adding custom path not supporting anymore !

// Add your custom path inside your module class`init` function, didn't tested outside
public function init()
{
    $path = __DIR__ . DIRECTORY_SEPARATOR . 'configs' . DIRECTORY_SEPARATOR;
    Mystique::add($path);
}

Mystique module will search site/modules/**/configs/Mystique.*.php and site/templates/Mystique.*.php paths for Mystique config files.

All config files need to return a PHP ARRAY like examples.

Usage almost same with ProcessWire Inputfield Api, only difference is set and showIf usage like on example.

<?php

namespace ProcessWire;

/**
 * Resource : testing-mystique
 */
return [
    'title' => __('Testing Mystique'),
    'fields' => [
        'text_field' => [
            'label' => __('You can use short named types'),
            'description' => __('In file showIf working like example'),
            'notes' => __('Also you can use $input->set() method'),
            'type' => 'text',
            'showIf' => [
                'another_text' => "=''"
            ],
            'set' => [
                'showCount' => InputfieldText::showCountChars,
                'maxlength' => 255
            ],
            'attr' => [
                'attr-foo' => 'bar',
                'attr-bar' => 'foo'
            ]
        ],
        'another_text' => [
            'label' => __('Another text field (default type is text)')
        ]
    ]
];

Example:

• site/templates/configs/Mystique.seo-fields.php

<?php

namespace ProcessWire;

/**
 * Resource : seo-fields
 */
return [
    'title' => __('Seo fields'),
    'fields' => [
        'window_title' => [
            'label' => __('Window title'),
            'type' => Mystique::TEXT, // or InputfieldText
            'useLanguages' => true,
            'attr' => [
                'placeholder' => __('Enter a window title')
            ]
        ],
        'navigation_title' => [
            'label' => __('Navigation title'),
            'type' => Mystique::TEXT, // or InputfieldText
            'useLanguages' => true,
            'showIf' => [
                'window_title' => "!=''"
            ],
            'attr' => [
                'placeholder' => __('Enter a navigation title')
            ]
        ],
        'description' => [
            'label' => __('Description for search engines'),
            'type' => Mystique::TEXTAREA,
            'useLanguages' => true
        ],
        'page_tpye' => [
            'label' => __('Type'),
            'type' => Mystique::SELECT,
            'options' => [
                'basic' => __('Basic page'),
                'gallery' => __('Gallery'),
                'blog' => __('Blog')
            ]
        ],
        'show_on_nav' => [
            'label' => __('Display this page on navigation'),
            'type' => Mystique::CHECKBOX
        ]
    ]
];

Searching data on Mystique field is limited. Because, Mystique saving data to database in json format. When you make search for Mystique field, operator not important. Operator will be changed with %= operator.

Search example

$navigationPages = pages()->find('my_mystique_field.show_on_nav=1');
$navigationPages = pages()->find('my_mystique_field.page_tpye=gallery');

[Sergio]

Looks very cool, @ukyo! Thanks for that, but the font-size on the video was hard on my eyes. ?

[ukyo]

@Sergio sorry about that, 4K screen ?

[ukyo]

@Sergio Updated video on youtube, its 1080p ?

[Sergio]

1 hour ago, ukyo said:

@Sergio sorry about that, 4K screen ?

No problem! Resolution is not the problem per se, but next time, for the sake of old fellas like myself, bump the font-size on your editor. ? 

[BitPoet]

8 hours ago, ukyo said:

Searching data inside this module is limited, because all data storing as a json value on to database

Maybe you could get some inspiration there from (or even improve on) my JsonNativeField module since MySQL supports searching inside JSON data.

[LostKobrakai]

Can you share a bit more details on how data is handled. E.g. what happens if I change a field or even remove it.

[ukyo]

6 hours ago, BitPoet said:

Maybe you could get some inspiration there from (or even improve on) my JsonNativeField module since MySQL supports searching inside JSON data.

@BitPoet will check it, but i don't want to limit user's database options and if you need an important searchable field i am not advising to use this field, use a fully searchable field.

3 hours ago, LostKobrakai said:

Can you share a bit more details on how data is handled. E.g. what happens if I change a field or even remove it.

@LostKobrakai I will add more details on readme.md file and will update this post and module page.

About your question : as you see on youtube video, updating fields config file will update data entry form for admin page. If you remove field, you won't see this field on admin pages anymore. I am not caching your configs, always trying to get configs from selected config files.

[LostKobrakai]

1 hour ago, ukyo said:

About your question : as you see on youtube video, updating fields config file will update data entry form for admin page. If you remove field, you won't see this field on admin pages anymore. I am not caching your configs, always trying to get configs from selected config files.

My question was less about the field definitions, but more about the data stored in a field defined by your module. E.g. say I want to change an integer field to a float field.

[ukyo]

2 minutes ago, LostKobrakai said:

My question was less about the field definitions, but more about the data stored in a field defined by your module. E.g. say I want to change an integer field to a float field.

Keep the field name same, do what you want. Because all data on database in string format (i am not checking user posted data), you can set field settings by using processwire fields api and you can limit user by settings.

Hook methods could be used for custom usages.

[ukyo]

I am using this module for SEO, LANGUAGE and ELEMENTS (uikit components)

USAGE EXAMPLE : LANGUAGE

On my private module, i added my custom configs path to Mystique module by using :

Mystique::add('my-module-configs-path');

- Create config file

<?php

namespace ProcessWire;

// Filename: MyModule/configs/Mystique.language.php

// This options normally coming from a file array, i added 2 options for example
$options = [
	'tr' => 'Türkçe',
	'en' => 'English'
];
$defaultValue = 'en';

/**
 * Resource : MyModule => Language
 */
return [
    'title' => __('MyModule: Language'),
    'fields' => [
        'title' => [
            'label' => __('Language title'),
            'description' => __('Title of language'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'code' => [
            'label' => __('Code'),
            'description' => __('Language short code'),
            'type' => Mystique::SELECT,
            'options' => $options,
            'defaultValue' => $defaultValue,
            'required' => true,
            'columnWidth' => 50
        ],
        'flag' => [
            'label' => __('Flag'),
            'description' => __('Language flag code'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'direction' => [
            'label' => __('Direction'),
            'checkboxLabel' => __('Right to left'),
            'description' => __('Direction of language'),
            'type' => Mystique::TOGGLE_CHECKBOX,
            'type_fallback' => Mystique::CHECKBOX,
            'columnWidth' => 50
        ],
        'currency' => [
            'label' => __('Currency'),
            'description' => __('Code of currency'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'symbol' => [
            'label' => __('Symbol'),
            'description' => __('Symbol of currency'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'grouping_separator' => [
            'label' => __('Grouping separator'),
            'description' => __('Thousand separator for amount'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'decimal_separator' => [
            'label' => __('Decimal separator'),
            'description' => __('Decimal separator for amount'),
            'type' => Mystique::TEXT,
            'columnWidth' => 50
        ],
        'separator' => [
            'label' => __('Use separator'),
            'checkboxLabel' => __('YES'),
            'description' => __('Apply space between amount and currency symbol ?'),
            'type' => Mystique::TOGGLE_CHECKBOX,
            'type_fallback' => Mystique::CHECKBOX,
            'columnWidth' => 33
        ],
        'show_decimal' => [
            'label' => __('Decimal'),
            'checkboxLabel' => __('YES'),
            'description' => __('Show amount decimals ?'),
            'type' => Mystique::TOGGLE_CHECKBOX,
            'type_fallback' => Mystique::CHECKBOX,
            'columnWidth' => 33
        ],
        'symbol_after' => [
            'label' => __('Symbol after'),
            'checkboxLabel' => __('YES'),
            'description' => __('Display symbol after amount ?'),
            'type' => Mystique::TOGGLE_CHECKBOX,
            'type_fallback' => Mystique::CHECKBOX,
            'columnWidth' => 33
        ],
    ]
];

- Select config file from Mystique field settings

- Add Mystique field to language template

Access data via api (in this example mystique field name is : lang)

<?php

$language = $user->language;
// lang is Mystique field
echo 'Title : ' . $language->lang->title . '<br>';
echo 'Code : ' . $language->lang->code . '<br>';
echo 'Flag : ' . $language->lang->flag . '<br>';
echo 'Direction : ' . $language->lang->direction . '<br>';
echo 'Currency : ' . $language->lang->currency . '<br>';
echo 'Symbol : ' . $language->lang->symbol . '<br>';
echo 'Grouping separator : ' . $language->lang->grouping_separator . '<br>';
echo 'Decimal separator : ' . $language->lang->decimal_separator . '<br>';
echo 'Separator between amount and symbol : ' . $language->lang->separator . '<br>';
echo 'Show decimal : ' . $language->lang->show_decimal . '<br>';
echo 'Show symbol after amount : ' . $language->lang->symbol_after . '<br>';

Output:

Title : English
Code : en
Flag : gb
Direction : 0
Currency : GBP
Symbol : £
Grouping separator : ,
Decimal separator : .
Separator between amount and symbol : 1
Show decimal : 1
Show symbol after amount : 0

 

[Jonathan Lahijani]

Hello @ukyo.  This module is fantastic, on the level of a Pro Field.  Nicely done!

From what I can tell, it does not support multi-select options (multi-select, ASM Select, Checkboxes).  Is this a planned feature?

[Jonathan Lahijani]

3 minutes ago, Jonathan Lahijani said:

Hello @ukyo.  This module is fantastic, on the level of a Pro Field.  Nicely done!

From what I can tell, it does not support multi-select options (multi-select, ASM Select, Checkboxes).  Is this a planned feature?

Upon further inspection, setting the 'type' to 'InputfieldAsmSelect' does work and does save properly.  Awesome.

[ukyo]

7 hours ago, Jonathan Lahijani said:

Upon further inspection, setting the 'type' to 'InputfieldAsmSelect' does work and does save properly.  Awesome.

Nice to hear that.

Processing input field there is not special check for input field. https://github.com/trk/Mystique/blob/master/InputfieldMystique.module.php#L135

Little bit worked on a base field type (basically this field type will get entered field type's database schemas and will create 1 database table for all entered fields), if i success about this field type, i will try to use input field based checks.

For the moment getting and setting directly posted data.

[cosmo]

First of all many thanks for the great Mystique Module.

I actually wanted to do something with Fieldset Group, but it's a ProModul so I've been looking for something similar. And I found Mystique. Could only do a few tests with it and then unfortunately made a PW update ...?

Today I have PW3.0.140 installed and now the module does not work anymore. I am not a developer and can not determine the problem.?

This is the output if I want to use the field:
Fatal Error: Uncaught Error: Call to a member function prepend() on null in /Applications/MAMP/htdocs/pw-pt/wire/core/Fields.php:1066
Stack trace:
#0 /Applications/MAMP/htdocs/pw-pt/wire/modules/Process/ProcessField/ProcessField.module(1412): ProcessWire\Fields->getCompatibleFieldtypes(Object(ProcessWire\Field))
#1 /Applications/MAMP/htdocs/pw-pt/wire/core/Wire.php(380): ProcessWire\ProcessField->___buildEditFormBasics()
#2 /Applications/MAMP/htdocs/pw-pt/wire/core/WireHooks.php(813): ProcessWire\Wire->_callMethod('___buildEditFor...', Array)
#3 /Applications/MAMP/htdocs/pw-pt/wire/core/Wire.php(442): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessField), 'buildEditFormBa...', Array)
#4 /Applications/MAMP/htdocs/pw-pt/wire/modules/Process/ProcessField/ProcessField.module(1020): ProcessWire\Wire->__call('buildEditFormBa...', Array)
#5 /Applications/MAMP/htdocs/pw-pt/wire/core/Wire.php(380): ProcessWire\ProcessField->___buildEditForm()
#6 /Applications/MAMP/htdocs/pw-pt/wire/core/WireHooks.php(813): ProcessWire\W (line 1066 of /Applications/MAMP/htdocs/pw-pt/wire/core/Fields.php)

I also have the version "next" v.0.0.6 installed but it comes to the same error.
Can someone help or does someone have the same problem?

Thank you ?

---
I was looking for a solution and think the module SeoMaestro has a similar problem with the new Processwire DEV version:

https://processwire.com/talk/topic/20817-seomaestro/?do=findComment&comment=190656

Maybe this info helps a PW professional to solve the problem.

[wbmnfktr]

@cosmo backup your project, grab the latest master release and make a downgrade. A quick fix for the time being. It's the same I did. ? 

[cosmo]

Yes, that would be the fastest solution.

I've just started using Processwire, so it's not that tragic. But I had a nice project idea where I would like to use the new inputfield Toggle and Mystique. I hope for the PW professionals that they recognize the problem and make a PW or module update.

[ukyo]

@cosmo @wbmnfktr @next version is not fully working version. Use published version on module directory. If you want to try @next version, don't do it on live projects !

I will check @next version with latest processwire dev version.

[cosmo]

It's not the @next version, but the latest version of Processwire 3.0.140 in combination with the Mystique Module. On my installation, both Mystique module versions do not work with Processwire 3.0.140.

Thank you for checking.

[ukyo]

@cosmo @wbmnfktr I updated module, i tested it with fresh pw 140 dev installation and i see there is problem on https://github.com/trk/Mystique/commit/b16fdba23f508c4901aeed56e71041ad34cf8c8b and removed this function.

 

Let me know if you still have problem ?

[matjazp]

I think thats PW core problem, see https://github.com/processwire/processwire-issues/issues/979

[cosmo]

It works - thank you. Great how fast you have solved this.?

I once used the example file "Example-Dive". Here is an image inputfield, how does it work? When I upload a picture, nothing happens.

Do you have any more practical examples or information for beginners?

[ukyo]

@cosmo Some of fields (image, file fields) not supported.

[cosmo]

18 hours ago, ukyo said:

@cosmo Some of fields (image, file fields) not supported.

OK - I almost thought so.

Anyway, your module is a very good timesafer. It also saves resources?

[bernhard]

Hi @ukyo,

I've just tried your module for the first time, but unfortunately it does not find any resources! This is the tracy dump:

Somehow the resources array is empty:

I have the following files in my setup:

C:\laragon\www\kaum\site\modules\Mystique\configs\Mystique.example-dive.php
C:\laragon\www\kaum\site\templates\configs\Mystique.mystique.php

No matter what I try - the resources select is empty:

I've even tried to do a $config->paths->normalizeSeparators() on the path without success (thought it might be a windows issue).

Thx for your help!