tutorial Simple Built-In Docs

[Macrura]

This is a very simple way to display some instructions to the admin users.

Before starting, you need to write some docs; they can be a hidden branch of your page tree, using basic-page, or a different template of your choosing. You should make each subject it's own page under the docs so you can output each one under an accordion trigger.

Required Module: Admin Custom Pages

1.) Follow all instructions to install the module; Also add the ACP_scripts_and_styles field to the admin template.

2.) Make a new page under admin, called Docs or whatever; assign the process as described in the module instructions.

3.) Make a template in your themes directory to generate the output of the docs page.

4.) Select that template from the page select in the admin custom page you created.

5.) also make a folder to keep your admin custom pages scripts and styles;

6.) create a css file to use for the display output and some basic styles (like ol, ul li etc..)

7.) Add the custom css file to your ACP_scripts_and_styles field.

You can use any output you want, but i'm using a nested accordion, which is provided here:

http://tympanus.net/codrops/2013/03/29/nested-accordion/

this is the content of the admin custom page:

<?php

    $docs = $pages->get(4259);

?>
<div id="docs">
    <ul id="cbp-ntaccordion" class="cbp-ntaccordion">
        <?php foreach($docs->children as $doc) { ?>
            <li>
                <h3 class="cbp-nttrigger"><?php echo $doc->title ?></h3>
                <div class="cbp-ntcontent">
                    <?php echo $doc->body;?>                        
                </div>
            </li>
        <?php } ?>
    </ul>
</div>

    <script src="<?php echo $config->urls->templates ?>_admin_custom/js/jquery.cbpNTAccordion.min.js"></script>
    <script>
        $( function() {
            $( '#cbp-ntaccordion' ).cbpNTAccordion();
        } );
    </script>

you'll also want to add the provided css, js and fonts that come with the Nested Accordion;

in the css file you'll need to point the fonts to the actual font directory, for example:

/site/templates/_admin_custom/fonts/icomoon_arrows/icomoon.eot

it should come out looking something like this:

*if you are using Reno theme, you can customize the icon, like for example fa-book, which is used in this example:

--

Thanks & Credits to Diogo for originally creating the ACP module, and for Nico for getting it to work with the new admin theme system...

[mr-fan]

Thank you very much for this one!

Best Regards mr-fan

[Macrura]

if you want to go further, you can use the nested accordion which allows for child accordions of the main topic;

you would need to create child pages for each main subject; in that case your template might look like this:

<?php

    $docs = $pages->get(4259);

?>
<div id="docs">
    <ul id="cbp-ntaccordion" class="cbp-ntaccordion">
        <?php foreach($docs->children as $doc) { ?>
            <li>
                <h3 class="cbp-nttrigger"><?php echo $doc->title ?></h3>
                <div class="cbp-ntcontent">
                    <?php echo $doc->body;?>
                    <?php if($doc->children->count()) { ?>    
                        <ul class="cbp-ntsubaccordion">
                            <?php foreach($doc->children as $child) { ?>    
                                <li>    
                                    <h4 class="cbp-nttrigger"><?php echo $child->title?></h4>
                                    <div class="cbp-ntcontent">
                                        <?php echo $child->body?>
                                    </div>
                                </li>
                            <?php } ?>
                        </ul>
                    <?php } ?>                         
                </div>
            </li>
        <?php } ?>
    </ul>
</div>

    <script src="<?php echo $config->urls->templates ?>_admin_custom/js/jquery.cbpNTAccordion.min.js"></script>
    <script>
        $( function() {
            $( '#cbp-ntaccordion' ).cbpNTAccordion();
        });
    </script>

in this code the sub-accordion is shown if there are child pages, and then it outputs the body of each child page in a sub-accordion, and it will end up looking something like this:

a more advanced implementation with edit links and an add new doc for superusers:

<?php 

	$docs = $pages->get(4259); 

?>
<div id="docs">
	<ul id="cbp-ntaccordion" class="cbp-ntaccordion">
		<?php foreach($docs->children as $doc) { ?>
			<li>
				<h3 class="cbp-nttrigger"><?php echo $doc->title ?></h3>
				<div class="cbp-ntcontent">
					<?php echo $doc->body;?>
					<?php if($user->hasRole('superuser')) { ?>
					<div style="float:right;font-size:11px;">
					<a href="<?php echo $config->urls->admin?>page/edit/?id=<?php echo $doc->id?>">Edit: "<?php echo $doc->title?>"</a> 
					</div><?php } ?>
					<?php if($doc->children->count()) { ?>	
						<ul class="cbp-ntsubaccordion">
							<?php foreach($doc->children as $child) { ?>	
								<li>	
									<h4 class="cbp-nttrigger"><?php echo $child->title?></h4>
									<div class="cbp-ntcontent">
										<?php echo $child->body?>
										<?php if($user->hasRole('superuser')) { ?>
										<div style="float:right;font-size:11px;">
										<a href="<?php echo $config->urls->admin?>page/edit/?id=<?php echo $child->id?>">Edit: "<?php echo $child->title?>"</a> 
										</div><?php } ?>
									</div>
								</li>
							<?php } ?>
						</ul>
					<?php } ?> 						
				</div>
			</li>
		<?php } ?>
	</ul>
	<?php if($user->hasRole('superuser')) { ?>
	<div style="float:right;font-size:13px;">
		<a href="<?php echo $config->urls->admin?>page/add/?parent_id=4259">
			<button class="ui-button ui-widget ui-corner-all head_button_clone ui-state-default" name="button" value="Add New" type="button"><span class="ui-button-text"><i class="fa fa-plus-circle"></i> Add New Doc</span></button>
		</a> 
	</div><?php } ?>
</div>

	<script src="<?php echo $config->urls->templates ?>_admin_custom/js/jquery.cbpNTAccordion.min.js"></script>
	<script>
		$( function() {
			$( '#cbp-ntaccordion' ).cbpNTAccordion();
		});
	</script>

[changwuf31]

Ah, thanks so much.. Any idea if this is printable ?

[pwired]

This is very practical. It can be used also to leave info

about the edits you did/do on a site.

[Macrura]

@changwuf31:

it is possible to print, but might require some additional code; for example you could do a printable pop up window;

for now i'm hoping that my clients save a tree and use these built in docs for reference..

this is a huge thing, especially psychologically and from a perspective of workflow; because now my clients know that there are docs, and consequently will probably check there first before contacting me; and on the flipside if they ask me a question that is already covered in the docs, i can bounce back with 'did you read the docs?'

[Macrura]

Using this module, in combination with the Template Select module, it is easily possible to show inline related documentation on the edit page.

Same setup as above, but adding the template select field on the doc template.

could also be further modified to support showing a doc only on a specified page, or children of a page, using selector fieldtype..

example module

https://gist.github.com/outflux3/3e76a1338b61d708157c

[mr-fan]

For thoose how work with AdminCustomFiles Module:

https://processwire.com/talk/topic/7588-admin-custom-files/

You could easy get this both together just setup the docs - but instead of loading via ACP_scripts_and_styles field and on the admin template you could use this two files to get all the things right up...unzip the package in your "AdminCustomFiles" Folder and use it only with the output generating php stuff in the admin template like above:

<?php
    //only load the doc pages without js or css all done via AdminCustomFiles for ProcessAdminCustomPages
    $docs = $pages->get(1149);
?>

<div id="docs">
    <ul id="cbp-ntaccordion" class="cbp-ntaccordion">
        <?php foreach($docs->children('include=all') as $doc) { ?>
            <li>
                <h3 class="cbp-nttrigger"><?php echo $doc->title ?></h3>
                <div class="cbp-ntcontent">
                    <?php echo $doc->body;?>                        
                </div>
            </li>
        <?php } ?>
    </ul>
</div>

Thanks to Macura for this great idea!

Regards mr-fan

ProcessAdminCustomPages.zip

[Macrura]

hey mr-fan - good idea, makes it easier to setup;

hoping at some point to improve this whole thing, including how it displays (needs more styling for the text), and bundle it with the page docs tab, as a module...

[mr-fan]

This weekend i'm in short trip to Hamburg for vacation...

But you could write me a pm if i could help....not really fit with module creating but good with a helping hand and testing if needed?

Best regards mr-fan

[Macrura]

@mr-fan, thanks! with my current workload, i think i would start developing the module slowly and project it to be done by end of May or June; so i'll get back in touch!

[Macrura]

ok this is finally a module under construction

https://processwire.com/talk/topic/11803-admindocstab/