Difference between revisions of "Include Javascript in the workflow"

From EPrints Documentation
Jump to: navigation, search
(Custom input renderer)
m
 
(15 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
==Pure Javascript==
 
==Pure Javascript==
  
This should be the prefered method although it is not always straight forward to use depending what your trying to do. EPrints stores javascript files in <eprints_root>/archives/<archive_id>/cfg/static/javascript/auto/ and it EPrints ships with PrototypeJS. If your workflow problem is specific enough you can simply us $$('any-css-selectors').whateveryouneedtodo()
+
This should be the prefered method although it is not always straight forward to use depending what your trying to do. EPrints stores javascript files in <code>'''eprints_root'''/archives/'''archive_id'''/cfg/static/javascript/auto/</code> and it EPrints ships with PrototypeJS. If your workflow problem is specific enough you can simply use
 +
 
 +
<pre>
 +
    $$('.any-css-selectors').each( function( matching_element ) {
 +
// your code here
 +
    });
 +
</pre>
  
 
==Custom input renderer==
 
==Custom input renderer==
Line 9: Line 15:
 
You can overwrite the input renderer for the field you wish to modify. This gives you access to information used to render the field.
 
You can overwrite the input renderer for the field you wish to modify. This gives you access to information used to render the field.
  
( $field, $session, $current_value, $dataset, $staff, $hidden_fields, $object, $basename )
+
<source lang="perl">
 +
          {
 +
            'name' => 'courses',
 +
            'type' => 'text',
 +
    'multiple' => 1,
 +
    'text_index' => 1,
 +
    'render_input' => sub {
 +
                    my ( $field, $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename ) = @_;
 +
                   
 +
                    my $dom = $field->render_input_field_actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );
 +
                    my $script = $repository->xml->create_element("script", type=>"text/javascript");
 +
                    my $perl = "print STDERR 'This will be printed to the error log.';
 +
                    $script->appendChild($repository->xml->create_text_node('
 +
// your javascript here '." which can have $perl interlaced "
 +
                    ));
 +
            }
 +
          },
 +
</source>
 +
 
 +
===Example custom input renderer===
 +
Below is an example of a custom renderer.  This is for a multiple select form element, where some of the options have become deprecated.  The code will add a message to a warning box if either when the page loads or whilst the user is selecting options they choose an option that is deprecated.  However, it will not prevent them from choosing this option.
 +
<source lang="perl">
 +
          {
 +
            'name' => 'divisions',
 +
            'type' => 'subject',
 +
            'multiple' => 1,
 +
            'top' => 'divisions',
 +
            'browse_link' => 'divisions',
 +
            'render_input' => sub {
 +
              my ( $field, $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename ) = @_;
 +
              my $messagebox = $repository->xml->create_element("div", id=>$basename."_messagebox", class=>"ep_msg_warning_content_no_table", style=>"display: none;");
 +
              my $messagelist = $repository->xml->create_element("div", id=>$basename."_messagelist");
 +
              $messagebox->appendChild($messagelist);
 +
              my $dom = $field->render_input_field_actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );
 +
              my $script = $repository->make_javascript('var selectmenu = document.getElementById("'.$basename.'");
 +
window.addEventListener("load", function(){ setDivisionsMessage(selectmenu) });
 +
selectmenu.addEventListener("click", function(){ setDivisionsMessage(selectmenu); });
 +
function setDivisionsMessage(selectmenu){
 +
        var messagebox = document.getElementById("'.$basename.'_messagebox");
 +
        var messagelist = document.getElementById("'.$basename.'_messagelist");
 +
        messagelist.innerHTML = "";
 +
        var historical_divisions = [ "cen_sis", "cen_mpm", "fac_acc", "fac_fin", "fac_ms", "fac_mar", "fac_om", "fac_ob", "fac_sts", "fac_sei" ];
 +
        for (var i=0, j=selectmenu.options.length; i<j; i++) {
 +
                if (selectmenu.options[i].selected && historical_divisions.indexOf(selectmenu.options[i].value) != -1){
 +
                        var message = document.createElement("li");
 +
                        message.appendChild(document.createTextNode(selectmenu.options[i].innerHTML + " is a historical centre. Please consider choosing a different centre."));
 +
                        messagelist.appendChild(message);
 +
                }
 +
        }
 +
        messagebox.style.display = (messagelist.children.length > 0 ? "block" : "none");
 +
}
 +
');
 +
              my $superdom = $repository->xml->create_element("div");
 +
              $superdom->appendChild($messagebox);
 +
              $superdom->appendChild($dom);
 +
              $superdom->appendChild($script);
 +
              return $superdom;
 +
            }
 +
          },
 +
</source>
  
 
==XHTML Component==
 
==XHTML Component==

Latest revision as of 17:55, 7 October 2015

Sometimes you need to augment an EPrints workflow in a specific way. One of the ways you can do this is using javascript but it is not immediately clear how to do that. There are several options available which may suit what you need to do.

Pure Javascript

This should be the prefered method although it is not always straight forward to use depending what your trying to do. EPrints stores javascript files in eprints_root/archives/archive_id/cfg/static/javascript/auto/ and it EPrints ships with PrototypeJS. If your workflow problem is specific enough you can simply use

    $$('.any-css-selectors').each( function( matching_element ) {
// your code here
     });

Custom input renderer

You can overwrite the input renderer for the field you wish to modify. This gives you access to information used to render the field.

          {
            'name' => 'courses',
            'type' => 'text',
	    'multiple' => 1,
	    'text_index' => 1,
	    'render_input' => sub {
                    my ( $field, $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename ) = @_;
                    
                    my $dom = $field->render_input_field_actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );
                    my $script = $repository->xml->create_element("script", type=>"text/javascript");
                    my $perl = "print STDERR 'This will be printed to the error log.';
                    $script->appendChild($repository->xml->create_text_node('
// your javascript here '." which can have $perl interlaced "
                    ));
             }
          },

Example custom input renderer

Below is an example of a custom renderer. This is for a multiple select form element, where some of the options have become deprecated. The code will add a message to a warning box if either when the page loads or whilst the user is selecting options they choose an option that is deprecated. However, it will not prevent them from choosing this option.

          {
            'name' => 'divisions',
            'type' => 'subject',
            'multiple' => 1,
            'top' => 'divisions',
            'browse_link' => 'divisions',
            'render_input' => sub {
              my ( $field, $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename ) = @_;
              my $messagebox = $repository->xml->create_element("div", id=>$basename."_messagebox", class=>"ep_msg_warning_content_no_table", style=>"display: none;");
              my $messagelist = $repository->xml->create_element("div", id=>$basename."_messagelist");
              $messagebox->appendChild($messagelist);
              my $dom = $field->render_input_field_actual( $repository, $current_value, $dataset, $staff, $hidden_fields, $object, $basename );
              my $script = $repository->make_javascript('var selectmenu = document.getElementById("'.$basename.'");
window.addEventListener("load", function(){ setDivisionsMessage(selectmenu) });
selectmenu.addEventListener("click", function(){ setDivisionsMessage(selectmenu); });
function setDivisionsMessage(selectmenu){
        var messagebox = document.getElementById("'.$basename.'_messagebox");
        var messagelist = document.getElementById("'.$basename.'_messagelist");
        messagelist.innerHTML = "";
        var historical_divisions = [ "cen_sis", "cen_mpm", "fac_acc", "fac_fin", "fac_ms", "fac_mar", "fac_om", "fac_ob", "fac_sts", "fac_sei" ];
        for (var i=0, j=selectmenu.options.length; i<j; i++) {
                if (selectmenu.options[i].selected && historical_divisions.indexOf(selectmenu.options[i].value) != -1){
                        var message = document.createElement("li");
                        message.appendChild(document.createTextNode(selectmenu.options[i].innerHTML + " is a historical centre. Please consider choosing a different centre."));
                        messagelist.appendChild(message);
                }
        }
        messagebox.style.display = (messagelist.children.length > 0 ? "block" : "none");
}
');
              my $superdom = $repository->xml->create_element("div");
              $superdom->appendChild($messagebox);
              $superdom->appendChild($dom);
              $superdom->appendChild($script);
              return $superdom;
            }
          },

XHTML Component

You if you are in hurry or prototyping then you can use a HTML Component

<component type='XHTML'>
<script type='text/javascript'>
        //your javascript goes here
</script>
</component>

The downside of this approach is it leaves a tiny bit of workflow component floating in your workflow so you probably wouldn't use it in production.