Which fieldtype should i use for Bootstrap Lists?

[GeraldSchmidt]

Hello,

I'm a true beginner at processwire and this is my first post! So first of all I would like to address my cordial greeting to all of you

What i want to know is how to handle a bootstrap list with field types in processwire. I could use a simple text input field with commas and cut them for iterating but this is not a good solution. And the other problem is that i also want to implement the bootstrap-tooltip (see attached image file)

What is the best solution for this problem?

Thank you very much in advance for your answer.

regards,

Gerald

[adrian]

Hi @GeraldSchmidt and welcome to PW - great to have you aboard.

What you are looking for is a Page Fieldtype (http://processwire.com/videos/page-fieldtype/) or an Options Fieldtype (https://processwire.com/api/modules/select-options-fieldtype/.)

Then you'll need to choose an Inputfield type (ASM Select, Checkboxes, Autocomplete, Multitransfer etc).

Then in your template file:

foreach($page->fieldname as $item) {
    echo "<li>{$item->title}</li>";
} 

Please let us know as you have more questions.

[GeraldSchmidt]

Hi @adrian thanks for your reply! I have tested the Option FieldType but the problem is that i'm only able to store single value information.

Is it possible to add a option field which opens an further input-field where the user is able to add further information?

I mean something like this:

User is adding Option Value "Any List Point"

After adding the value we are able to store random text to "Any List Point" for example by an Input-Field. It would be nice if i could add a lot of options just for one option value.

Example Iteration could be something like this:

foreach($page->fieldname as $item) {
    echo "<li>{$item->firstMessage}{$item->tooltip}{$item->secondMessage}</li>";
}

regards,

Gerald

[adrian]

Hi Gerald,

That is exactly what Page fields are all about. Most new users struggle to understand the approach at first, but it is incredibly powerful. 

Here is a bit more info about it: http://wiki.processwire.com/index.php/Page_Field

There is actually a much better description somewhere, but I can't seem to find it right now - hopefully someone else will post it here shortly.

You may also find this new module a great addition to the page field interface, allowing your editors to edit the content of each option page inline: http://modules.processwire.com/modules/admin-page-field-edit-links/

[LostKobrakai]

I think another good way would be using a PageTable (core module, but uninstalled by default), which would get you a more visual list than a classic pagefield.

[Macrura]

In terms of how to output a list, this mostly depends on what the list items are; And since you will seem to need optional links with data attributes, PageTable is probably the the best way..

other options might include:

Profields Table

Repeater

and if they are items that you want to reuse across different pages, then regular page field with the module that adrian posted would be best.

[tpr]

Perhaps an inline CKEditor with in a Repeater could also do the job. I see you have a mix of text and links in your list items.

[GeraldSchmidt]

@tpr thanks for your reply! I think this is what i'm going to implement. Is it possible to enable bootstrap for the CKEditor? If this is possible then i wouldn't need the repeater

regards,

Gerald

[tpr]

Is it possible to enable bootstrap for the CKEditor?

There's no such thing in ProcessWire as I know, at least built-in. You need to add bootstrap classes in your template file, if that's what "enable bootstrap" should mean

[LostKobrakai]

CKEditor doesn't care about frameworks. You'd need to check that classes are allowed for lists, but then you can add all the classes you want to them. The downside of using only a single CKEditor is, that you've no easy way to edit the list via the api, as it's saved as big blob of markup. With repeaters or pagetables you've still all the options when accessing the infos via api.

[GeraldSchmidt]

I have solved my problem!

See attached image file for the structure.

I have installed the "Hannah Code Text Formatter" and created my own code for the tooltip!

<?php

    $tooltipMessage = isset($tooltipMessage) ? htmlentities($tooltipMessage) : "";
    $tooltipAnchorname = isset($tooltipAnchorname) ? htmlentities($tooltipAnchorname) : "";
    $output = '<a class="bootstrap-tooltip" title="" data-toggle="tooltip" type="button" data-original-title="'.$tooltipMessage.'">'.$tooltipAnchorname.'</a>';
    echo $output;

?>

The usage of the code:

[[bootstrapTooltip tooltipMessage="The TooltipMessage....." tooltipAnchorname="My ToolTip-Link"]]

My template file contains following code (see attached image file, the marked area shows the important part of the code)

<?php
	foreach($page->colorPaletteBoxRepeater as $actualColorPaletteBoxRepeater) { 
		$getActualColorPaletteBoxesListArray = array_values(array_filter(explode(PHP_EOL, $actualColorPaletteBoxRepeater->colorPaletteBoxesList)));
		$getActualColorPaletteBoxesListHTML = "";
		foreach($getActualColorPaletteBoxesListArray as $getActualColorPaletteBoxesList) $getActualColorPaletteBoxesListHTML .= '<li class="list-group-item">'.$getActualColorPaletteBoxesList.'</li>';
		echo '<article class="'.$actualColorPaletteBoxRepeater->colorPaletteBoxesBackgroundSelector->title.'">';
		echo '<div class="container">
				<div class="jumbotron">
					<div class="row clearfix">
						<div class="col-lg-6 column">
							<i class="fa fa-'.$actualColorPaletteBoxRepeater->fontIconPicker.' services-font-icon"></i>
						</div>
						<div class="col-lg-6 column">
							<h1>'.$actualColorPaletteBoxRepeater->colorPaletteBoxesHeadline.'</h1>
							<p>'.$actualColorPaletteBoxRepeater->colorPaletteBoxesParagraph.'</p>
							<ul class="list-group">
								'.$getActualColorPaletteBoxesListHTML.'
							</ul>
							<p>
								<a class="btn btn-primary btn-lg" href="'.$actualColorPaletteBoxRepeater->colorPaletteBoxesLink.'" role="button">'.$actualColorPaletteBoxRepeater->colorPaletteBoxesLinkName.'</a>
							</p>
						</div>
					</div>
				</div>
		</div>';
		echo '</article>';
	}
?>