how to reuse a field in a template

[DarsVaeda]

Say I have a field for an unordered list. I need to have such a list twice on the page with different list items.
Ideally I would create one field that can take html and only allows for <ul> and <li>.

I can add the field to another template.
But it seems I can't add that field twice to a template or am I missing something?

[adrian]

You'll either need a separate field, or make use of a repeater field

[DarsVaeda]

So there is no extra layer to reuse a field within a template?

Any reason to why this is the case or is this on the feature list?

[adrian]

1 minute ago, DarsVaeda said:

So there is no extra layer to reuse a field within a template?

Any reason to why this is the case or is this on the feature list?

This may be what you are looking for:

https://processwire.com/api/modules/profields/textareas/

Ignore the name of the fieldtype - it's not very descriptive of what it actually does.

 

[DarsVaeda]

Hmm can't buy that currently.

For example:
Currently I'm implementing a form in PW. There are 7 input fields that each have a label. So I would have to make 7 plain text fields for this?
Cause I don't think I could use a repeater as no one would know which field is what label.

[adrian]

4 minutes ago, DarsVaeda said:

Hmm can't buy that currently.

For example:
Currently I'm implementing a form in PW. There are 7 input fields that each have a label. So I would have to make 7 plain text fields for this?
Cause I don't think I could use a repeater as no one would know which field is what label.

Yeah it doesn't sound like a repeater would be a good fit at all.

So yes, you will need 7 input fields to make this work.

[kongondo]

Maybe if you explained exactly what you would like to achieve? Creating fields only to store unordered lists might be an overkill.

Welcome to the forums btw..

[DarsVaeda]

8 minutes ago, kongondo said:

Maybe if you explained exactly what you would like to achieve? Creating fields only to store unordered lists might be an overkill.

Why?

See for example this footer:

I would generate 5 fields so each can hold one of the lists, wouldn't I?
PS: Actually this example is a bit bad, as it could be done with a repeater. I can't find any better example now. Just imagine there is content in between so there are only "Category" and "Books" left.
If you now use a repeater I don't think people would get what is related.

[BitPoet]

This footer looks like it contains lists of links. My first thought would be to create a repeater field "footeritems" consisting of a text field "label" and a page field "links" configured to hold multiple pages. Then you add a repeater item, give it the label "Category" and add all the pages like "Tanks & Spaghettis", "T Shirts & Polo T Shirts", ...

Your PHP template then only needs to loop over the repeater, output the label as the heading and the pages as list items. Of course, this assumes that all the links shown exist as actual pages and not just URL segments.

foreach($page->footeritems as $item) {
	echo "<div class='uk-panel'><div class='uk-panel-title'>{$item->label}</div><ul>";
	foreach($item->links as $link) {
		echo "<li><a href='{$link->url}'>{$link->title}</a></li>";
	}
	echo "</ul></div>";
}

 

[kongondo]

Or...if those items within each list are some child pages or some items in page fields (those are the usual approaches), all you need to do is to generate them in your template file. For instance, if you had the following site structure:

Home
	Categories
		Tanks and Spaghettis
		T-Shirts and Polo T-Shirts
	Brands
		Apple
		ASUS
	Mobile Phones
		Mobile Phones
		Android Phones
	Foot wears
		Sports Shoes
		Casual Shoes
	Books
		Literature and Fiction
		Competitive Exams

In template, you would do something like this.

$items = $pages->find('some-parent-template');// this is the template for Categories, Brands, etc...
foreach($items as $item) {
	// some code here...to build Column Headers
	foreach($item->children as $child) {
		// code here to build list
	}
}

 

[DarsVaeda]

On 31/01/2017 at 6:03 PM, kongondo said:

Maybe if you explained exactly what you would like to achieve? Creating fields only to store unordered lists might be an overkill.

Welcome to the forums btw..

Sorry for taking so long but here I made a real life example of a part of a page/template I have to implement. It is a standard contact form and the simplest template I have on the site: https://jsfiddle.net/k2z4v5b5/
I want to be able to edit all texts you can see: labels, placeholders, button text and even options. All those texts are translated into x languages.
For the button text and the textarea I can use reusable general fields, for the select group I can use a repeater imo.
But for the other input fields...I currently tried with a repeater.
That would works somehow if you watch out for the order and all the input fields are of the same type.
It gets messy (I think) with the gender radio. Now I have to add two sublabels to the repeater but only one input actually uses it.
Now editors have to know that they only have to input it with radio input. Most won't be able to get that.
Using non general fields I would at least need 10 fields aka 10 tables 

So I would really be grateful for input on how you would implement this 

code:

<main id="main" class="wrapper contact" role="main">
    <div class="container">
        <div class="row">
            <article class="col-xs-12 plain_text">
                <div class="row">
                    <h1 class="col-xs-12 title">Title</h1>
                    <div class="col-md-8">
                        <edit html_textarea>some textarea</edit>
                        <div class="flex-row">
                            <div class="col-sm-6">
                                <small>* mandatory</small>
                                <div class="form-group">
                                    <label class="sr-only" for="reason">Label 1</label>
                                    <select id="reason" class="form-control">
                                        <option>some option 1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="message">message *</label>
                                    <textarea id="message" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="message">gender</label>
                                    <div class="radio">
                                        <label class="radio-inline">
                                            <input type="radio" name="sex" value="female"> female
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="sex" value="male"> male
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group has-success has-feedback">
                                    <label class="control-label" for="inputSuccess2">name</label>
                                    <input type="text" class="form-control" id="inputSuccess2" placeholder="John Doe"
                                           aria-describedby="inputSuccess2Status">
                                    <span class="glyphicon glyphicon-ok form-control-feedback"
                                          aria-hidden="true"></span>
                                    <span id="inputSuccess2Status" class="sr-only">(success)</span>
                                </div>
                                <div class="form-group has-warning has-feedback">
                                    <label class="control-label" for="inputWarning2">mail</label>
                                    <input type="text" class="form-control" id="inputWarning2"
                                           placeholder="example@email.com" aria-describedby="inputWarning2Status">
                                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"
                                          aria-hidden="true"></span>
                                    <span id="inputWarning2Status" class="sr-only">(warning)</span>
                                </div>
                                <div class="form-group has-error has-feedback">
                                    <label class="control-label" for="inputError2">something</label>
                                    <input type="text" class="form-control" id="inputError2" placeholder="type something dude"
                                           aria-describedby="inputError2Status">
                                    <span class="glyphicon glyphicon-remove form-control-feedback"
                                          aria-hidden="true"></span>
                                    <span id="inputError2Status" class="sr-only">(error)</span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="input">something else</label>
                                    <input type="text" class="form-control" id="input" placeholder="we want ur data">
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" value="">
                                        Yep please use sell all my data!
                                    </label>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary btn-lg">send</button>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

 

[DarsVaeda]

I think I could add what I came up with so far. You possibly get the idea for the rest of the form:

<div class="col-sm-6">
    <small>* mandatory</small>
    <div class="form-group">
        <label class="sr-only"
               for="reason"><?= $page->input_list->get(0)->plaintext ?></label>
        <select name="reason" class="form-control">
            <?php foreach ($page->input_list->get(0)->option_list as $option): ?>
                <option><?= $option->plaintext ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="form-group">
        <label for="message"><?= $page->input_list->get(1)->plaintext ?></label>
        <textarea id="message" class="form-control"></textarea>
    </div>
</div>
<div class="col-sm-6">
    <div class="form-group">
        <label for="message"><?= $page->input_list->get(2)->plaintext ?></label>
        <div class="radio">
            <?php foreach ($page->input_list->get(2)->option_list as $option): ?>
                <label class="radio-inline">
                    <input type="radio" name="gender"
                           value="<?= $option->input_value ?>"> <?= $option->plaintext ?>
                </label>
            <?php endforeach; ?>
        </div>
    </div>
    <!-- ... -->
</div>

What would be nice ie. is changing the naming from "$option->plaintext" to "$option->label" but then I could reuse that field only for labels...

[kongondo]

Not sure I follow fully, but it looks like you are creating a form builder? You say you want various parts of the form to be editable? If that's the case, I would invest in FormBuilder.

[DarsVaeda]

No, that's only a static form and currently the only one.

[kongondo]

1 hour ago, DarsVaeda said:

I want to be able to edit all texts you can see: labels, placeholders, button text and even options. All those texts are translated into x languages.

Hmm...what does this mean then? You want to be able to edit these where? In the backend?

[rick]

Maybe I am missing something, and please correct me if I am wrong.

Based on the increasing disclosure of your requirements, "re-use a field in a template" to "edit all texts you can see":

It sounds like you want an 'online' version of a form building app (similar in functionality to what is shown at phpform.org) except that you want to edit only a pre-existing form's elements (a template, so to speak), which you have designed.

[DarsVaeda]

52 minutes ago, kongondo said:

Hmm...what does this mean then? You want to be able to edit these where? In the backend?

Editors should be able to change the value of the field in the backend so that in the frontend say they can change or translate the label or placeholder of an input field.

 

16 minutes ago, rick said:

Maybe I am missing something, and please correct me if I am wrong.

Based on the increasing disclosure of your requirements, "re-use a field in a template" to "edit all texts you can see":

It sounds like you want an 'online' version of a form building app (similar in functionality to what is shown at phpform.org) except that you want to edit only a pre-existing form's elements (a template, so to speak), which you have designed.

Hey, the form is just one example where I hit the need to have reusable fields. Another one would be the list mentioned above. I don't want a form builder.

[LostKobrakai]

Translations or changes in the default language of static texts (like your placeholders/labels) should be done with the right tool, which in case of processwire is the language support module. Use Pages for dynamic content (and longer texts).