Create setting for extension

Justoverclock

I try to read the docs but I have some problem to extend the settings for my extension.

I have my extension and I need to create a basic settings:
title, 1 field and some instructions(text).

Actually I’m not able to display anything so I’m doing something wrong.
How can I do this correctly?

clarkwinkelmann

Justoverclock are you able to share your current code?

Justoverclock

clarkwinkelmann actually I’ve removed the code because not work. So I’m starting from zero

luceos

You might want to look at fof/components, byobu uses that too to generate its settings page.

askvortsov

luceos fof/components is obsolete. As of beta 16, the admin dashboard's native tooling should be used.

https://docs.flarum.org/extend/admin.html#extension-data-api
https://docs.flarum.org/extend/settings.html

Justoverclock

so, my extension need a simple settings page, one field, and a text block for instruction.

in this case i need to use into admin/index.js

import FlarumSettingsModal from 'flarum/components/SettingsModal';
import classList from 'flarum/utils/classList';

but i do not understand how can i display things on settings page.

Justoverclock

oh, i think i'm done with this:
🙂

Justoverclock

actually in admin/index.js i have this:

import app from 'flarum/app';

app.initializers.add('justoverclock-contactme', () => {
  app.extensionData.for('justoverclock-contactme')
    .registerSetting({
      
      type: 'email',
      required: true,
      label: app.translator.trans('flarum-ext-contactme.admin.settings.emaillabel')
    }, 15)

});

and i'm trying to learn how to transform the input into variable, and then put this variable as the real email, i don't know if is the correct way, but trying help me to understand javascript

askvortsov

Justoverclock You're missing a key called setting on the object passed to registerSetting. That key should map to the name of the setting.

Then in your backend code, you'll want to inject a settings repository interface instance in the constructor (see the second link), just how we're doing for translator and mailer right now. Then you can use $this->settings->get

Justoverclock

askvortsov u mean that i need a controller?

in my mind was simple, admin goes to the extension setting, then fill the field with a valid email, and the i transform that input value into a variable.

after that i put this variable instead of a email.

for sure its wrong....but that is what i have in my mind

now i have this but it basically useless i think:

import app from 'flarum/app';
import ExtensionPage from 'flarum/admin/components/ExtensionPage';


app.initializers.add('justoverclock-contactme', () => {
  app.extensionData.for('justoverclock-contactme')
    .registerSetting({
      setting: 'justoverclock-contactme.coordinates',
      type: 'email',
      required: true,
      label: app.translator.trans('flarum-ext-contactme.admin.settings.emaillabel')
    }, 15)

});

askvortsov

Justoverclock u mean that i need a controller?

You already have one!

Justoverclock

askvortsov oh u mean contactcontroller.php!!!

i will try something on this 🙂 like:

class ClassInterfacesWithSettings
{

    protected $settings;

    public function __construct(SettingsRepositoryInterface $settings)
    {
        $this->settings->get();
    }
}

Justoverclock

just to understand, why this code:

app.initializers.add("my-extension", () => {
  app.extensionData.for("my-extension").registerSetting(
    {
      setting: "my-extension.coordinates",
      name: "my_name",
      type: "text",
      label: app.translator.trans(
        "my-translator-properties"
      ),
    },
    15
  );
});

actually display in the extension settings an input form and a "save" button? what if i want to change a field with (for example) a textarea?

i need to create a component with my things that have to be displayed and then import this in admin.js?

import MyPage from './components/MyPage';

SychO

Justoverclock 🤔 We should add the textarea type,

you can use a callback for special form groups, example for a textarea: (untested)

    .registerSetting(function () {
      return (
        <div className="Form-group">
          <label>{label}</label>
          <div className="helpText">{help}</div>
          <textarea bidi={this.setting('my_setting_name')}>{this.setting('my_setting_name')()}</textarea>
        </div>
      );
    })

Justoverclock

SychO it actually break the page

askvortsov

SychO If you copied this code directly, you need to define the variables for label and text, or use the translator there directly.

You don't need a textarea for an email field.

clarkwinkelmann

Justoverclock the column width of a setting is fixed and can't be changed, however it's quite long (MySQL TEXT field), so it should easily fit whatever you need.

To create a field that makes it user-friendly to insert a longer text, a textarea can be used as described by SychO above.

For future readers of this thread I see we now have an issue to track the addition of the textarea as a standard setting type that you created flarum/core2809

Justoverclock

perfect, i will try this 🙂
but the main question is, why that code display a form and a button? i can't figure which part of the code refer to these

SychO

Justoverclock If you want to change that completely, you can create a custom extension page, more details here: https://docs.flarum.org/extend/admin.html#extending-overriding-the-default-page

clarkwinkelmann

Justoverclock if you want to take a look at the source code, this is where the settings configuration is looped through: https://github.com/flarum/core/blob/v0.1.0-beta.16/js/src/admin/components/ExtensionPage.js#L118-L135

And this is the method that's called with each settings configuration https://github.com/flarum/core/blob/v0.1.0-beta.16/js/src/admin/components/AdminPage.js#L96-L133

SychO

Justoverclock what's in the browser console ?

Justoverclock

mount-redraw.js:15 ReferenceError: label is not defined
    at e.<anonymous> (index.js:8)
    at e.n.buildSettingComponent (AdminPage.js:98)
    at Array.map (<anonymous>)
    at e.n.content (ExtensionPage.js:126)
    at e.n.sections (ExtensionPage.js:96)
    at e.n.view (ExtensionPage.js:52)
    at Function.s (render.js:30)
    at render.js:155
    at render.js:160
    at l (render.js:66)
s @ mount-redraw.js:15

i missed something for sure, i'm trying to find what