How to show repeater records from user custom fields on frontend?

Hi!

I recorded a screencast how to output and save a repeating custom field. And also how to add and remove fields in the repeater on the frontend.

https://www.youtube.com/watch?v=QhjWrjWpiPw

Page user.htm

https://pastebin.com/Sig0BJz8

title = "user"
url = "/user"
layout = "default"
is_hidden = 0
robot_index = "index"
robot_follow = "follow"

[session]
security = "all"

[account]
paramCode = "code"
forceSecure = 0
requirePassword = 0
==
<?php
use RainLab\User\Models\User as UserModel;

    function onSave()
    {

        $data = post();
        $rules = [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'confirmed|min:8',
        ];
        $validation = Validator::make($data, $rules);
        if ($validation->fails()) {
            throw new ValidationException($validation);
        }
        $id = input('id');
        $user = UserModel::where('id', $id)->first();
        $user->fill($data);
        $notescount = input('notescount');      

        $notes = [];

        for ($i = 1; $i <= $notescount; $i++) {

           if(input('note' . $i)){
            $notes[] = ['notes' => input('note' . $i) ];
           }
        }

        $user->setField('myfields', $notes);

        $user->save();

        Flash::success('Successfully saved!');

        if (array_key_exists('password', $data) && strlen($data['password'])) {
            Auth::login($user->reload(), true);
        }

    }
?>
==
<section id="demo" class="section demos bg-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center section-title">

                    <br>
                    {% if not user %}

                    {% component 'account' %}

                    {% endif %}

                    {% if user %}

                    <div id="customfields">
                        {% partial 'user' %}
                    </div>

                    <p>Hello {{ user.name }}</p>

                    <a data-request="onLogout" data-request-data="redirect: '/user'">Sign out</a>

                    {% else %}
                    <p>Nobody is logged in</p>
                    {% endif %}

                </div>
            </div>
        </div>
    </section>

Partial user.htm

https://pastebin.com/1mUDz1rU

[session]
security = "all"
==
<form class="" data-request="onSave"  data-request-flash data-request-files  data-request-validate data-request-update="user: '#customfields'">

        <input name="id" type="text"  id="accountName" value="{{ user.id }}" hidden>

        <div class="form-group">
            <label for="accountName">Full Name</label>
            <input name="name" type="text" class="form-control" id="accountName" value="{{ user.name }}">
            <span data-validate-for="name"></span>
        </div>

        <div class="form-group">
            <label for="accountEmail">Email</label>
            <input name="email" type="email" class="form-control" id="accountEmail" value="{{ user.email }}">
            <span data-validate-for="email"></span>
        </div>        

        <div class="form-group">
            <label for="accountPassword">New Password</label>
            <input name="password" type="password" class="form-control" id="accountPassword">
            <span data-validate-for="password"></span>
        </div>

        <div class="form-group">
            <label for="accountPasswordConfirm">Confirm New Password</label>
            <input name="password_confirmation" type="password" class="form-control" id="accountPasswordConfirm">
            <span data-validate-for="password_confirmation"></span>
        </div>

        <!-- notes count -->
        <input id="notescount" name="notescount" value="{{ user.getRepeatField('notes') | length }}"  hidden>

          <div id="notes">

        <!-- textareas -->

        {% for item in user.getRepeatField('notes') %}
            <div  id="note{{loop.index}}"  class="form-group">
            <label>Note</label>
            <button type="button" class="btn btn-default" onclick="$( '#note{{loop.index}}' ).remove();">Del</button>               
                <textarea class="form-control" name="note{{loop.index}}">{{ item.notes }}</textarea>
            </div>  
        {% endfor %}

        </div>  

        <script>
            function addnote(){

                $( "#notescount" ).val(Number.parseInt($( "#notescount" ).val()) + 1);
                var notecount = $( "#notescount" ).val()
                $( "#notes" ).append( 
                `<div id="note` +  notecount + `" class="form-group">           
                <label>Notes</label>
                <button type="button" class="btn btn-default" onclick="$( '#note` +  notecount + `' ).remove();">Del</button>               
                <textarea class="form-control" name="note` +  notecount + `"></textarea>                        
                </div>  `
                );
            }
        </script>

        <div class="form-group">
            <button type="button" class="btn btn-default" onclick="addnote()">Add Notes</button>
        </div>  

        <div class="form-group">
            <button type="submit" class="btn btn-default">Save</button>
        </div>
    </form>

Last updated 3 years ago