Jump to content

Which fieldtype should i use for Bootstrap Lists?


GeraldSchmidt
 Share

Recommended Posts

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

post-3414-0-93515800-1431728056_thumb.pn

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

post-3414-0-90042600-1431774660_thumb.pn

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>';
	}
?>

post-3414-0-32670100-1431984381_thumb.pn

post-3414-0-10380100-1431984963_thumb.pn

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...