I would like to see a way to navigate in a multipage edit form. Right now I can only see previous and next as ways to get around. Similar to this http://drupal.org/project/multistep but this module is in dev and has not been updated in a couple of years.. Has anyone come across anything like this? I did try the multistep module, but kept getting a lot of errors.

CommentFileSizeAuthor
#1 scrren.png63.95 KB8bitplateau
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

8bitplateau’s picture

FileSize
63.95 KB

hi,

I've added a little jquery snippet in my themes js like so :

  /**********************************************
  **
  **   Add navigation to mulitpage forms
  ** 
  ***********************************************/
  if( $('.multipage-panes').is('*') ){
    // create some markup
    var markup = '';
    $('.field-group-multipage').each(function(){
      var title = $(this).find(' > h2').text();
      var thisid = $(this).attr('id');
      var nextid = $(this).next().attr('id');
      var previd = $(this).prev().attr('id');
      markup += '<span class="btn" prev="' + previd + '" this="' + thisid + '" next="' + nextid + '">' + title + '</span>';
    });
    // stick the markup some where (append or before etc)
    $('.multipage-panes:not(.vu-navadded)')
      .append( '<div id="multipage-nav" class="btn-group">' + markup + '</div>')
      .addClass('vu-navadded');
    // add some js click
    $('#multipage-nav .btn:not(.vu-processed)').each(function(){
      $(this).click(function(){
        var prev = $(this).attr('prev');
        if(prev == 'undefined'){
          var next = $(this).attr('next');
          $('#' + next + ' .multipage-link-previous').trigger('click');
          $("html, body").animate({ scrollTop: "0px" });
        }else{
          $('#' + prev + ' .multipage-link-next').trigger('click');
          $("html, body").animate({ scrollTop: "0px" });
        }
      });
    }).addClass('vu-processed');
  }
  

i am using my own bootstrap theme though and have themed the multipage.js function

Drupal.theme.prototype.multipage = function (settings) {
  var controls = {};
  controls.item = $('<span class="multipage-button"></span>');
  controls.item.append(controls.nextLink = $('<input type="button" class="multipage-link-next btn btn-info" value="Next" />'));
  controls.item.append(controls.previousLink = $('<input type="button" class="multipage-link-previous btn btn-info" value="Previous" />'));
  if (!settings.has_next) {

so that it gets bootsrtap styling.
the page nav gets rendered in a bootsrtap button group.
it also scrolls to top and you can stick it anywhere.
probaly will not work for you stratight away as i have differnet selectors but a good place to start

xbrianx’s picture

Hi, thanks for your reply.. I've been trying to figure this out now for quite a bit here, and still having some problems.. I created a file in my themes directory js called multipage-nav.js and calling the script in the theme.info file and then cleared the caches.

The script is being called on the page, so i know that is ok, but the navigation didn't show up. After a bit of research, i found that with drupal jquery scripts need to be wrapped inside:

  ( function($) {
(YOUR SCRIPT)
})( jQuery );

I thought this should be the answer but alas after clearing caches and refreshing with the revised script it still didn't work. So I am not quite sure what to do now.

chrisolof’s picture

@xbrianx: Check out the "behaviors" section of this page:
http://drupal.org/node/756722

xbrianx’s picture

Thanks chrisolof, even though I am not sure what I am doing, I was able to get it to work after looking through that document and taking a look at the code of some other modules.

what I ended up needing was to add the bit of code for the behaviors, I went with

( function($) {
	Drupal.behaviors.MultiPageNav = {
  attach: function (context) {

Then used the provided code from digitisation.

Now I have the navigation showing up.

8bitplateau’s picture

better .. don't use 'undefined'

  /**********************************************
  **
  **   Add navigation to mulitpage forms
  ** 
  ***********************************************/

  if( $('.multipage-panes').is('*') ){
    // create some markup
    var markup = '';
    $('.field-group-multipage').each(function(){
      var title = $(this).find(' > h2').text();
      var thisid = $(this).attr('id');
      var nextid = $(this).next().attr('id');
      var previd = $(this).prev().attr('id');
      markup += '<span class="btn" prev="' + previd + '" this="' + thisid + '" next="' + nextid + '">' + title + '</span>';
    });
    // stick the markup some where (append or before etc)
    $('.multipage-panes:not(.vu-navadded)')
      .append( '<div id="multipage-nav" class="btn-group">' + markup + '</div>')
      .addClass('vu-navadded');
    // add some js click
    $('#multipage-nav .btn:not(.vu-processed)').each(function(i,v){
      $(this).click(function(){
        if(i == 0){
          var next = $(this).attr('next');
          $('#' + next + ' .multipage-link-previous').trigger('click');
          $("html, body").animate({ scrollTop: "0px" });
        }else{
          var prev = $(this).attr('prev');
          $('#' + prev + ' .multipage-link-next').trigger('click');
          $("html, body").animate({ scrollTop: "0px" });
        }
      });
    }).addClass('vu-processed');
  }

with ...

Drupal.theme.prototype.multipage = function (settings) {
  var controls = {};
  controls.item = $('<span class="multipage-button"></span>');
  controls.item.append(controls.nextLink = $('<input type="button" class="multipage-link-next btn btn-info" value="Next" />'));
  controls.item.append(controls.previousLink = $('<input type="button" class="multipage-link-previous btn btn-info" value="Previous" />'));
  if (!settings.has_next) {
    controls.nextLink.hide();
  }
  if (!settings.has_previous) {
    controls.previousLink.hide();
  }
  return controls;
};

xbrianx’s picture

Thanks for the update on this; It would be great if this functionality became part of the multistep module itself in future versions, as it is extremely helpful.

8bitplateau’s picture

i agree, but as well as 'jump to step' I have also added 'save and continue' functionality.

this is utilising some JavaScript that is already present in the multipage.js that allows you to jump to step using a link with a fragment where the fragment is the ID of the field-group, not sure if this is left over from the accordion display mode's js as some of the code looks similar.

so all i did was add an extra button in a form_alter with its own submit function to execute the form and set the destination to reload the same page with a fragment appended but ... #hashes (anchors / fragments or what ever you wanna call them) are client side and are not present in the executed $form array so I added an extra hidden element in the form and used javascript to write the ID of the current step (fieldgroup) to it. heres how.

oh, and this is on user entity not node by the way

1) shuffle around saves in form_alter and add new button

  $form['actions']['icv_submit'] = $form['actions']['submit'];
  $form['actions']['icv_submit']['#submit'][0] = 'icv_save_and_continue';
  $form['actions']['icv_submit']['#value'] = 'Save and continue';
  $form['actions']['icv_submit']['#weight'] = -10;

2) the actual submit function

function icv_save_and_continue($form, &$form_state){
  $tab = $form['field_current_tab']['und'][0]['value']['#value'];
  $form_state['redirect'] = array('user/'.arg(1).'/edit', array('fragment' => $tab));
  form_load_include($form_state, 'inc', 'user', 'user.pages');
  user_profile_form_submit($form, $form_state);
}

3) the hacked jquery snippet from multipage.js

Drupal.multipageControl.prototype = {
  /**
   * Displays the tab's content pane.
   */
  focus: function () {
    // new stuff added by me
    if( $('#edit-field-current-tab-und-0-value').is('*')){
      $('#edit-field-current-tab-und-0-value').val(this.wrapper.attr('id'));
    }

4 ) and dont forget to add a new form elemet either in form_alter of profile entity ui (account settings fields)

my user profile form is pretty large, its for a CV, and losing data really annoys people.
'jump to step' and 'save and continue' are two functions I put in that massively increased usability, the users were very happy about it.

lots of this code is in the module already, perhaps its coming in soon ??
this would also be written a lot better by the modules developers rather than me hacking around ;)

kaare’s picture

Version: 7.x-1.1 » 7.x-1.x-dev
Issue summary: View changes

I have a sandbox module that solves this: Multipage jumplist.

It creates a list of all panes/pages in a block, somewhat similar to Multistep module, minus the progress bar.

Unfortunately it only works for node edit forms, but if there is interest for it, I'll make it more flexible.

Also, bumped the version to 7.x-1.x-dev.

marameodesign’s picture

Hi Kaare,

Thank you so much for the module. I am using it and so far not an issue!

Thanks again!

djschoone’s picture

Kaare: great module! Thnanks for the effort.

kaare’s picture

Status: Active » Needs review

Bumped the sandbox to a full project: https://www.drupal.org/project/multipage_jumplist

So one suggestion to close this issue is simply to provide a link to Multipage jumplist on the project page under Modules that depend on fieldgroup.

ikeigenwijs’s picture

Status: Needs review » Reviewed & tested by the community

yes add to the project page