Jump to content
GeraldSchmidt

Which fieldtype should i use for Bootstrap Lists?

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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/

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
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 :)

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Juergen
      Hello @ all,
      I am creating a new inputfield/fieldtype to store opening hours, but I am struggeling to save values from multiple dynamic created inputfields in 1 column of the database.
      Scenario:
      The user can enter one or more opening times per day in a UI.
      Fe:
      Monday open from 08:00 to 12:00 and from 14:00 to 17:00 Tuesday open from 08:00 to 12:00 and from 14:00 to 19:00 and so on
      Via a little JavaScript you can add as much opening times as you need per day - the additional inputfield will be created dynamically.
      After form submission all the values are in the POST array -> this works (see example below):
      ProcessWire\WireInputData Object ( [openinghours_mo-0-start] => 09:00 [openinghours_mo-0-finish] => 13:00 [openinghours_mo-1-start] => 14:00 [openinghours_mo-1-finish] => 18:00 [openinghours_mo-2-start] => 21:00 [openinghours_mo-2-finish] => 23:00 [openinghours_tu-0-start] => 09:00 [openinghours_tu-0-finish] => 13:00 [openinghours_tu-1-start] => 14:00 [openinghours_tu-1-finish] => 18:00 [openinghours_we-0-start] => 09:00 [openinghours_we-0-finish] => 13:00 [openinghours_we-1-start] => 14:00 [openinghours_we-1-finish] => 18:00 [openinghours_th-0-start] => 09:00 [openinghours_th-0-finish] => 13:00 [openinghours_th-1-start] => 14:00 [openinghours_th-1-finish] => 18:00 [openinghours_fr-0-start] => 09:00 [openinghours_fr-0-finish] => 13:00 [openinghours_fr-1-start] => 14:00 [openinghours_fr-1-finish] => 18:00 [openinghours_sa-0-start] => [openinghours_sa-0-finish] => [openinghours_so-0-start] => [openinghours_so-0-finish] => ) The property name is always the name attribute of the field 😉 . If the property is empty means closed on that day.
      Now I need to combine all those values into 1 array (or json array) and store it in the database in 1 column called 'hours' in my case (see screenshot below):

      In my ___processInput(WireInputData $input) method I have tried to make it work like this:
      public function ___processInput(WireInputData $input): self { $name = $this->attr('name'); $value = $this->attr('value'); //input object includes always every input on the page, so lets filter out only inputs from this field //we need to do this, because the number of values is variable - so extract only values that starts with $name.'_' $nameAttributes = []; foreach($input as $key=>$value){ if(substr($key, 0, strlen($name.'_')) === $name.'_'){ $nameAttributes[$key] = $value; } } // loop through all inputfields of this fieldtype $time_values = []; foreach($nameAttributes as $nameAttr => $value) { $time_values[$nameAttr] = $value; } } //save it in the database $input->set('hours', serialize($time_values)); return $this; } The only important part of this code is the last part with the serialize function.
      After saving it will create a record in the database, but the value is always NULL (default value) (see below).

      Checking $time_values returns all the values, but printing out "$this" shows me that the property "hours" inside the Openinghours object is empty (see below) - so the mistake must be there, but I dont know where?!?!?!?
      [title] => Home [openinghours] => ProcessWire\OpeningHours Object ( [data] => Array ( [hours] => ) ) If I check the sleepValue() method or the sanitizeValue() - they are also empty. So it seems that the values will not reach these methods. I havent found a clear documentation of whats going on behind the saving process of an inputfield.
      As far as I know the saving process starts with the form submission. The values are in the POST array and will be processed by the processInput() method. Before they will be saved in the database they will be sanitized by the sanitizeValue() mehtod and afterwards they will be prepared for storage in the sleepValue() method.  The last step is the storage itself.
      Has someone an idea what is missing by storing values from multiple fields into 1 database column or has someone a working example of such a scenario on github to help me out.
      A clear explanation of the storage process will be also helpful.
      Thanks and best regards
    • By Juergen
      Hello @ all!
      I want to share a simple fieldtype and inputfield to store address data with you.
      I have created this inputfield for learning purposes and it has no fancy functionality. It is simply for storing address data such as street, number, postalcode and so on in one table. As an addition you can store latitude and longitude too, so you can use them in maps.
      Here is a screenshot of what it looks like:

      You can select which fields are mandatory and you can choose if the inputs for longitude and latitude should be displayed. These settings can be configured in the field configuration.
      If you find this inputfield useful you can download it at https://github.com/juergenweb/FieldtypeSimpleAddress
      There you will find a detailed explanation. If you have an idea of an usefull feature that can be added or you have detected a bug, please report it in my github account.
       
    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By gebeer
      Hello all,
      sharing my new module FieldtypeImageReference. It provides a configurable input field for choosing any type of image from selectable sources. Sources can be: 
      a predefined folder in site/templates/ and/or a  page (and optionally its children) and/or the page being edited and/or any page on the site CAUTION: this module is under development and not quite yet in a production-ready state. So please test it carefully.
      UPDATE: the new version v2.0.0 introduces a breaking change due to renaming the module. If you have an older version already installed, you need to uninstall it and install the latest master version.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImageReference
      Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Read on for features and use cases.
      Features
      Images can be loaded from a folder inside site/templates/ or site/assets Images in that folder can be uploaded and deleted from within the inputfield Images can be loaded from other pages defined in the field settings Images can be organized into categories. Child pages of the main 'image source page' serve as categories mages can be loaded from any page on the site From the API side, images can be manipulated like native ProcessWire images (resizing, cropping etc.), even the images from a folder Image thumbnails are loaded into inputfield by ajax on demand Source images on other pages can be edited from within this field. Markup of SVG images can be rendered inline with `echo $image->svgcontent` Image names are fully searchable through the API $pages->find('fieldname.filename=xyz.png'); $pages->find('fieldname.filename%=xy.png'); Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message with links to help you edit those pages and remove references there before you can finally delete the image. This field type can be used with marcrura's Settings Factory module to store images on settings pages, which was not possible with other image field types When to use ?
      If you want to let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site (e.g. icons, but not limited to that).
      Other than the native ProcessWire images field, the images here are not stored per page. Only references to images that live on other pages or inside a folder are stored. This has several advantages:
      one central place to organize images when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same) Installation and setup instructions can be found on github.
      Here's how the input field looks like in the page editor:

      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Install from URL: https://github.com/gebeer/FieldtypeImageReference/archive/master.zip
      Eventually this will go in the module directory, too. But it needs some more testing before I submit it. So I'd really appreciate your assistance.
      Thanks to all who contributed their feedback and suggestions which made this module what it is now.
       
    • By gebeer
      EDIT: all development and discussion of this module has been moved to Module FieldtypeImagePicker which now contains all features of this module and more. This module will not be maintained any further. The information below remains for pure historical reasons.
      I am happy to present my new fieldtype FieldtypeImageFromPage. It is made up of 2 modules:
      Fieldtype Image Reference From Another Page is a Fieldtype that stores a reference to a single image from another page. The image can be selected with the associated Inputfield.
      Inputfield Select Image From Page is an Inputfield to select a single image from images on a predefined page and it's children.
      And there also is a helper module that takes care of cleanup tasks.
      This module evolved out of a discussion about my other Module FieldtypeImagePicker.  It caters for use cases where a set of images is being reused multiple times across a site. With this fieldtype these images can be administered through a chosen page. All images uploaded to that page will be available in the inputfield.
      When to use ?
      Let editors choose an image from a set of images that is being used site-wide. Ideal for images that are being re-used across the site.
      Suited for images that are used on multiple pages throughout the site (e.g. icons).
      Other than the native ProcessWire images field, the images here are not stored per page. Only references to images on another page are stored. This has several advantages:
      one central place to organize images when images change, you only have to update them in one place. All references will be updated, too. (Provided the name of the image that has changed stays the same) Features
      Images can be manipulated like native ProcessWire images (resizing, cropping etc.) Image names are fully searchable through the API Accidental image deletion is prevented. When you want to delete an image from one of the pages that hold your site-wide images, the module searches all pages that use that image. If any page contains a reference to the image you are trying to delete, deletion will be prevented. You will get an error message to help you edit those pages and remove references there before you can finally delete the image. How to install and setup
      Download and install this module like any other modules in ProcessWire Create a page in the page tree that will hold your images. This page's template must have an images field Upload some images to the page you created in step 2 Create a new field. As type choose 'Image Reference From Another Page'. Save the field. In 'Details' Tab of the field choose the page you created in step 2 Click Save button Choose the images field name for the field that holds your images (on page template from step 2) Click Save button again Choose whether you want to include child pages of page from step 2 to supply images Add the field to any template You are now ready to use the field View of the inputfield on the page edit screen:

      View of the field settings

      The module can be installed from this github repo. Some more info in the README there, too.
      In my tests it was fairly stable. After receiving your valued feedback, I will eventually add it to the modules directory.
      My ideas for further improvement:
      - add ajax loading of thumbnails
      Happy to hear your feedback!
       
×
×
  • Create New...