Home

OpenContent OpenData Forms

L'estensione permette l'integrazione di alpacajs con eZPublish Legacy attraverso l'estensione OpenContent Opendata

Attraverso questa estensione è possibile esporre form di creazione e di modifica di contenuti eZ in modalità asincrona (ajax).

E' inoltre possibile creare dei connettori custom per facilitare l'inserimento di contenuti secondo logiche e controlli ad hoc.

Esempio di utilizzo

Includere nel template le dipendenze:

<script type="text/javascript" src={'javascript/tinymce/tinymce.min.js'|ezdesign()} charset="utf-8"></script>

{ezscript_require(array(
    'ezjsc::jquery',
    'ezjsc::jqueryUI',
    'bootstrap.min.js',
    'handlebars.min.js',
    'moment-with-locales.min.js',
    'bootstrap-datetimepicker.min.js',
    'jquery.fileupload.js',
    'jquery.fileupload-process.js',
    'jquery.fileupload-ui.js',
    'alpaca.js',
    'leaflet/leaflet.0.7.2.js',
    'leaflet/Control.Geocoder.js',
    'leaflet/Control.Loading.js',
    'leaflet/Leaflet.MakiMarkers.js',
    'leaflet/leaflet.activearea.js',
    'leaflet/leaflet.markercluster.js',
    'jquery.price_format.min.js',
    'jquery.opendatabrowse.js',
    'fields/OpenStreetMap.js',
    'fields/RelationBrowse.js',
    'fields/LocationBrowse.js',
    'jquery.opendataform.js'
))}

{ezcss_require(array(
    'alpaca.min.css',
    'leaflet/leaflet.0.7.2.css',
    'leaflet/Control.Loading.css',
    'leaflet/MarkerCluster.css',
    'leaflet/MarkerCluster.Default.css',
    'bootstrap-datetimepicker.min.css',
    'jquery.fileupload.css',
    'alpaca-custom.css'
))}

L'inclusione delle dipendenze è corposa e non ottimizzata: nella prossima release si provvederà a ottimizzarla.

Definisco il div html dove caricare il form e i bottoni per inizializzarlo:

<a class="btn btn-success opendataform-create" data-class="folder" data-parent="2">
    Crea una nuova cartella
</a>

<a class="btn btn-success opendataform-edit" data-object="14">
    Modifica l'oggetto 14
</a>

<a class="btn btn-success opendataform-view" data-object="14">
    Visualizza l'oggetto 14
</a>

<!-- il form verrà caricato in una finestra modale usando il modal di bootstrap -->
<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="clearfix">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div id="my-form"></div>
            </div>
        </div>
    </div>
</div>

Inizializzo il form con il plugin jquery.opendataform.js

{literal}
<script type="text/javascript">
$(document).ready(function () {

    var form = $('#my-form');

// apre la finestra modale prima di caricare il form
    $.opendataFormSetup({
        onBeforeCreate: function(){
            $('#modal').modal('show')
        }
    });

// intercetto l'evento di creazione
    $('.opendataform-create').on('click', function(e){
        var classIdentifier = $(this).data('class');
        var parentNode = $(this).data('parent');
        form.opendataFormCreate({
            "class": classIdentifier,
            "parent": parentNode
        },{
            "onSuccess": function(data){
                form.html(data.message);
                $('#modal').modal('hide');
            }
        });
        e.preventDefault();
    });

// intercetto l'evento di modifica
    $('.opendataform-edit').on('click', function(e){
        var objectId = $(this).data('object');
        form.opendataFormEdit({
            "object": objectId
        },{
            "onSuccess": function(data){
                form.html(data.message);
                $('#modal').modal('hide');
            }
        });
        e.preventDefault();
    });

// intercetto l'evento di visualizzazione
    $('.opendataform-view').on('click', function(e){
        var objectId = $(this).data('object');
        form.opendataFormView(objectId);
        e.preventDefault();
    });
});
</script>
{/literal}

Vedi il template di demo per un esempio più completo

La risposta dei metodi create e edit è:

{message: "success", method: "create", content: {}}

dove il content è un oggetto Opendata API Content