⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Tabs in forms



MiamMiam
  • profile picture
  • Member

Posted 01 February 2014 - 16:10 PM

Hi everyone,

 

Let me expose to you the workaround I found to get tabs in GC forms.

It does not affect the core of Grocery CRUD

 

Watch the final result on the Films example :

 

[attachment=756:form_tabs_1.png][attachment=757:form_tabs_2.png][attachment=758:form_tabs_3.png]

 

First step : in the controller

 

In the Grocery _construct :

Load the session library like this :

$this->load->library('session');

In the film managememt function :

1. Indicate in $crud->fields the fields you want to be displayed. Don't forget to insert a fake field at the beginning. It will be used for the tabs. Here it is called 'tabs'.

2. Build an array of arrays containing the fields you want to be displayed in each tab. The first item is the name of the tab, it is not a field.

3. Save this big array in a session variable.      

4. Call the callback for the fake field "tabs"

//========================================================================= F I L M S 
public function film_management() 
{ 
$crud = new grocery_CRUD(); 

$crud->set_language('english'); 
$crud->set_theme('datatables'); 
$crud->set_table('film'); 
$crud->set_relation_n_n('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname','priority'); 
$crud->set_relation_n_n('category', 'film_category', 'category', 'film_id', 'category_id', 'name'); 
$crud->unset_columns('special_features','description','actors'); 
// 
// ================================ Form tabs
$crud->fields( 
'tabs' 
,'title','description','release_year','length','rating','special_features' 
,'actors','category' 
,'rental_duration','rental_rate','replacement_cost' 
); 
// Store fields in arrays corresponding to each form tab 
$tabs = array ( 
array('Film','title','description','release_year','length','rating','special_features') 
,array('Actors-Category','actors','category') 
,array('Rental','rental_duration','rental_rate','replacement_cost') 
); 
$this->session->set_userdata('myproject_film_tabs', $tabs); // Send variables to the callback via session data 
$crud->callback_field('tabs',array($this,'_form_tabs')); // Make the fake field 
// =============================== End of Form tabs
// 
$output = $crud->render(); 
$this->_example_output($output); 
}

Then add the callback function :

      function _form_tabs()
    {
        $tabs = $this->session->userdata('myproject_film_tabs'); // retrieve arrays from session data
        // build the tabs
        $html = '
            <!-- tabs -->
            <ul class="nav nav-tabs" data-toggle="myproject.tabs.fields_box">'. "\n";
        $i = 0;
        foreach ($tabs as $tab) {
            $html .= '<li';
            if ($i == 0){$html .= ' class="active"'; $i = 1;}
            $html .= '><a href="#' . implode(",", array_slice($tab,1)) . '">'. $tab[0] . '</a></li>' . "\n";
        }
        $html .= '</ul>
            <!-- #/tabs -->';
        //
        return $html;        
    }

Second step : uploading the required jQuery and CSS files

 

jQuery :

http://www.orez.net/silo/grocery_crud/tabs_in_forms/form_tabs.js ( :( I failed to use the Media library of this forum).

Css :

[attachment=759:form_tabs.css]

 

 

Third step : in the view

 

Add the calls to form_tabs.js and form_tabs.css.

 

That's all folks !

 

 

Hint :

A field can be repeated in different tabs by adding it to each tab you like.

Example : the name of the film as a reminder of the row you are editing.

 

I wrote the Php part of this stuff. Maybe it could be improved. I found no other solution than sessions to send the arrays to the callback. Any idea ?

Someone else wrote the Javascript and CSS part for me. Any comment ?

 

If you think this contribution is worth, I could make this documentation more comprehensive for newbies.

 

Any improvement is welcome.

 

Hope it helps


MiamMiam
  • profile picture
  • Member

Posted 01 February 2014 - 17:18 PM

sorry, I forgot to post the callback function.

Now you have the whole stuff.


Amit Shah
  • profile picture
  • Member

Posted 05 February 2014 - 10:47 AM

Well i will like to congratulate you over your effort in bringing up such a wonderful contribution. As for the improvement ..

here is what i will suggest / recommend  a restructure...

https://github.com/blakdronzer/POWER-GCrud

Here - there is a library / extension in application/libraries folder - grocery_crud_with_groups.php - that contains the configuration to create a form with box around the same (group up)... the same can be used for tabs

 

Co-related to the same is inside the following folder -

POWER-GCrud / assets / grocery_crud / themes / flexigrid / views /

edit_with_groups.php
add_with_groups.php
read_with_groups.php

 

The above three are separately usable views that becomes the part of extension.

 

you can refer to the use of the same @New Features Enhancements

 

 

Happy GCing :)


MiamMiam
  • profile picture
  • Member

Posted 09 February 2014 - 14:17 PM

@Amit Shah : I will check your extension ASAP. It looks great.


ohnague
  • profile picture
  • Member

Posted 12 February 2014 - 16:12 PM

Hello
There may be a possibility of using radio button is activated or some tabs are disabled.

Create a group of tabs for opiradio button...


MiamMiam
  • profile picture
  • Member

Posted 12 February 2014 - 17:05 PM

@ohnague in spanish :  no entiendo lo que quieres decir. 


ohnague
  • profile picture
  • Member

Posted 12 February 2014 - 18:29 PM

Mejor aún

Es como habilitar desde unos radio button los tabs que quiero visualizar

A lo que quiero llegar

en el post que iniciaste tienes como ejemplo tres images

un radio buttom en la primera (imagen)  y mediante ellos que me muestre el 2do o 3er tab, esta es la idea.

 

Algo con javascript

mas o menos

$tabs = array (
array('Film','title','description','release_year','length','rating','special_features')
,array('Rental','rental_duration','rental_rate','replacement_cost')
);

 

$crud->field_type('habitlitar_tabs', 'true_false', array('1' => 'Film', '0' => 'Rental'));

 

Espero haberme sido entender

 

****

excuse my English

Better yet

It's like from a radio button to enable the tabs I want to display


What I'm getting at

in the post you started as you say, three images

one radio buttom first (shown) and by showing them my 2nd or 3rd tab.

Something with javascript

more or less
$ Tabs = array (
array ('Film', 'title', 'description', 'release_year', 'length', 'rating', 'special_features')
, Array ('Rental', 'rental_duration', 'rental_rate', 'replacement_cost')
);

$ Crud-> field_type ("habitlitar_tabs', 'true_false', array ('1 '=>' Film ''0' => 'Rental'));

I hope I have been to understand


alain
  • profile picture
  • Member

Posted 14 February 2014 - 14:23 PM

Great! I'm going to test your code MiamMiam!

 

I hope it will work with my bootstrap-themed forms!


Amit Shah
  • profile picture
  • Member

Posted 15 February 2014 - 03:44 AM

Well sorry to say have not coded for bootstrap .. i did it more with flexigrid ... but u surely can apply the view to bootstrap too.. its all about the view that u need to change.


Amit Shah
  • profile picture
  • Member

Posted 15 February 2014 - 07:47 AM

welll not promised but looking at the requirements.. today i decided to build the extension for grocery crud with tabs...

Here i have added the functionality. It can be obtained from either of the links below

 

https://github.com/blakdronzer/POWER-GCrud     - for complete package ... - u can ignore this if u don't want to include all other power pack features. Also has got a bit of modifications over the last commit of mine so any1 who have had downloaded - may upgrade to this ...

 

https://github.com/blakdronzer/gc_with_tabs    - in case any1 just want to include just the grocery crud with tabs functionality.

 

the last function (customer_management3) in the examples.php controller is where it demonstrates how to use the feature. It is simple enough .. enjoy!!!!

 

Happy GCing :)


Robert
  • profile picture
  • Member

Posted 17 February 2014 - 07:37 AM

Nice work Amit Shash +1

 

Some of this features need to added to main GC to.


alain
  • profile picture
  • Member

Posted 17 February 2014 - 08:15 AM

Thanks MiamMiam for this topic, it is the solution of my problem!

And it works in all GC themes, I use twitter-bootstrap!


Amit Shah
  • profile picture
  • Member

Posted 17 February 2014 - 13:30 PM

Thanx robert - yes agreed but then whatever such changes that needs to go in it should go to Web Johny - u can suggest him such changes. My whole intention of providing the Power-GroceryCrud was to merely provide in a facility to all users who intend to use grocery crud's base fundamental library / power and also get enhanced extensions / code additions under 1 single roof. That is what i try to provide with that ... !!

 

My only issue is more of time constraint.. hence i am providing in as extension to flexigrid as that is where i use them.. and apply the ones tested there ... other ppl are free to update the code for other themes tooo... so every other theme user can benefit himself for the same.

 

Happy GCing :)


ssfthurber
  • profile picture
  • Member

Posted 18 February 2014 - 22:51 PM

welll not promised but looking at the requirements.. today i decided to build the extension for grocery crud with tabs...

Here i have added the functionality. It can be obtained from either of the links below

 

https://github.com/blakdronzer/POWER-GCrud     - for complete package ... - u can ignore this if u don't want to include all other power pack features. Also has got a bit of modifications over the last commit of mine so any1 who have had downloaded - may upgrade to this ...

 

https://github.com/blakdronzer/gc_with_tabs    - in case any1 just want to include just the grocery crud with tabs functionality.

 

the last function (customer_management3) in the examples.php controller is where it demonstrates how to use the feature. It is simple enough .. enjoy!!!!

 

Happy GCing :)

i like the tabs piece but it gives this warning:

Message: require_once(grocery_crud.php): failed to open stream: No such file or directory


Amit Shah
  • profile picture
  • Member

Posted 19 February 2014 - 05:14 AM

Welll it will try to include it as it is important piece for it. On server - if u have Grocery_CRUD.php u just change the include to Grocery_CRUD.php so it will recognize it that way...  Only reason i have it that way is - cuz in my code i reference the library by grocery_crud ... and Grocery_CRUD - hence i renamed it...

Enjoy - Happy GCing:)


Robert
  • profile picture
  • Member

Posted 09 May 2014 - 08:45 AM

Very nice lib but i found a problem with on the read part .. you don't see the tabs you see all the records like in the normal read ...


MiamMiam
  • profile picture
  • Member

Posted 22 July 2014 - 11:09 AM

@Robert : are you talking about Amit Shah's library or mine ?

Sorry I didn't see your message earlier.


likhon3k
  • profile picture
  • Member

Posted 31 October 2014 - 20:35 PM

sorry, I forgot to post the callback function.

Now you have the whole stuff.

 

Tab is not working. all field showing in Film tab. rest two tab is not working.

 

I followed your steps.

 

please tell me how to solve it.


rudyKipling
  • profile picture
  • Member

Posted 04 March 2018 - 09:12 AM

I could'nt make this code work. Anyone achieved to work this?


skech
  • profile picture
  • Member

Posted 03 November 2018 - 23:57 PM

Tab is not working. all field showing in Film tab. rest two tab is not working.

 

I followed your steps.

 

please tell me how to solve it.

It works normally. Except with the the non-free bootstrap theme. Tested

 

EDIT : It took me a dozen of minutes but now it works like a charm  with the non-free version of the awesome Bootstrap v-4 theme.

           If anyone is interested for the necessary modifications in views , let me know..

 

Thanks again to the contributor.