Live preview for register_settings_form()

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Custom Module Development / Live preview for register_settings_form()

This topic is: resolved
Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #34108

    davidlab
    Participant

    Is it possible to have a live preview for settings created within the register_settings_form() method? I tried but the settings only become active once the form is saved.

    #34216

    Justin Busa
    Keymaster

    Yes, definitely! You should be able to add a preview array to the field’s config array. Is that not working? If not, can you post an example of the code you are trying?

    #34398

    davidlab
    Participant

    I tested it again and still not work. I am testing it with the sample example plugin you provide and made a few changes to test the color. Here is some of the code.

    I call the form with:

      'form_field'     => array(
                            'type'          => 'form',
                            'label'         => __('Form Field', 'fl-builder'),
                            'form'          => 'example_settings_form', // ID from registered form below
                            'preview_text'  => 'example' // Name of a field to use for the preview text
                        ),

    Then the form I added a color field:

    /**
     * Register a settings form to use in the "form" field type above.
     */
    FLBuilder::register_settings_form('example_settings_form', array(
        'title' => __('Example Form Settings', 'fl-builder'),
        'tabs'  => array(
            'general'      => array( // Tab
                'title'         => __('General', 'fl-builder'), // Tab title
                'sections'      => array( // Tab Sections
                    'general'       => array( // Section
                        'title'         => '', // Section Title
                        'fields'        => array( // Section Fields
                            'example'       => array( // fields
                                'type'          => 'text',
                                'label'         => __('Example', 'fl-builder'),
                                'default'       => 'Some example text',
                                'preview'         => array(
                                    'type'             => 'text',
                                    'selector'         => '.fl-example-text'
                                )
                            ),
                            'color_field_2'    => array(
                                'type'          => 'color',
                                'label'         => __('Color Picker', 'fl-builder'),
                                'default'       => '333333',
                                'show_reset'    => true,
                                'preview'         => array(
                                    'type'            => 'css',
                                    'selector'        => '.fl-example-text',
                                    'property'        => 'color'
                                )
                            ),
                        ),
    
                    ),
    
                )
            ),
            'another'       => array( // Tab
                'title'         => __('Another Tab', 'fl-builder'), // Tab title
                'sections'      => array( // Tab Sections
                    'general'       => array( // Section
                        'title'         => '', // Section Title
                        'fields'        => array( // Section Fields
                            'another_example' => array(
                                'type'          => 'text',
                                'label'         => __('Another Example', 'fl-builder')
                            )
                        )
                    )
                )
            ),
    
        )
    ));

    I added a new field color_field_2 that targets the sample text for live preview. The same text color_field targets.

    #34470

    Justin Busa
    Keymaster

    Thanks, David. Looking at this, it might be easier for me to figure it out if I could dive into the code. Could you provide temporary admin and FTP access?

    #34503

    davidlab
    Participant

    I am working local. What if you posted a working sample and I will try it on my end.

    #34509

    Justin Busa
    Keymaster

    David,

    That might be a little difficult since I’m still trying to figure out what the issue is. 🙂 Could you send over your custom module plugin?

    Justin

    #34527

    davidlab
    Participant

    I am using the example module plugin that you supply in the developer section here with the added code from above. Not much else to show you.

    #34587

    davidlab
    Participant

    I can send you the Module plugin if you want. Where do I send it?

    #34610

    Justin Busa
    Keymaster

    Hey David,

    Thanks, that would be helpful. 🙂 You can send it to justin [at] fastlinemedia [dot] com.

    Justin

    #34617

    davidlab
    Participant

    I sent the files. The subject is the same as the title as this thread.

    #34621

    Justin Busa
    Keymaster

    Thanks, David! I have to head out early today and can have a closer look at this Monday. Have a great weekend!

    Justin

    #34635

    davidlab
    Participant

    Is their anyone else that can look at it. I planned on tackling it this weekend.

    #34726

    davidlab
    Participant

    Hi Justin,

    I also noticed that settings.css does not work in that example module plugin that I sent you. I did some more testing and it seems that when a module is created as an external plugin like the example plugin on your site that the settings.css is not called. If I add a custom module directly into the BB plugins modules folder then settings.css works fine and custom module styles are added when the module is activated.

    #34746

    davidlab
    Participant

    After more testing the settings.css file is loaded, but the styles do not take effect. It only works if the module is loaded from the plugins module directory and not from a custom plugin.

    #35182

    Justin Busa
    Keymaster

    Hey David,

    Thanks for the additional info. I’ll be testing this out shortly.

    Justin

    #35244

    Justin Busa
    Keymaster

    Hi David,

    Thanks for your patience. I did some testing and it looks like the settings.css file is working. I added the following CSS to make the header in the settings panel red and it worked…

    /**
     * This file should contain admin styles that 
     * will be applied to the module settings forms.
     */
    
    .fl-builder-example-settings h1 {
            background: #ff0000;
    }

    As for the live previews, I understand the issue now, you’re trying to do live previews in a nested form. Sorry I didn’t catch that earlier! Unfortunately, the builder doesn’t currently support live previews in nested form fields. Off the top of my head, I can’t remember the exact reason, but I do remember that there were some technical limitations that made it difficult to implement.

    If you want, feel free to add this as a feature request on our user voice page.

    Thanks!
    Justin

    #35265

    davidlab
    Participant

    Thanks Justin, I will test it again, but I tried it many times and could not get the settings.css to work on a module within an external plugin form. It was only working if I inserted the module into BB module directory, but I will try again later and let you know.

    I kind of thought live edit would not work on the nested forms by looking at all the other modules that use it. Thanks for verifying it, but it really should be a feature and would come in handy.

    Thanks again Justin.

    #35267

    Justin Busa
    Keymaster

    Hey David,

    Can you post the CSS you’re trying to get working in settings.css?

    Justin

    #35279

    davidlab
    Participant

    Ok..it is know working for some reason. Maybe it was a caching issue, but I tested it many times on a few different browsers last week with the same results. I will let you know within the next few days if it is an issue again, but for now it look like it works.

    #35282

    Justin Busa
    Keymaster

    Great! Do let us know if the issue comes up again.

    Justin

    #107386

    maheshwaghmare
    Participant

    Hi Justin,

    There is any enhancement on register_settings_form() for live preview.

    #107417

    Justin Busa
    Keymaster

    Hi maheshwaghmare,

    Nested forms created through register_settings_form() do not live preview at this time. Sorry I don’t have a better answer for you there.

    Justin

Viewing 22 posts - 1 through 22 (of 22 total)

The forum ‘Custom Module Development’ is closed to new topics and replies.