Integration on a project

You can integrate the CSV Import & Export into your application.

There are numerous ways for you to integrate our application in your project, but our suggestion (the most easy way) is to:

  1. Copy the whole application to your project.
  2. In your project, add an iframe to "call" the CIE on the page that you want.
  3. Add the iframe-resizer script next to the </body> tag.
  4. "Call" the iframe-resizer to the iframe you have added.
  5. Add the iframeResizer.contentWindow.min.js to the end of the CIE pages that you want to use.
  6. Optionally you can remove the CIE navabar and sidebar if you already have one in your project.
Heads up! If you sell your project with the CSV Import & Export application, you need to purchase an Extended License on Envato.

Examples

Full integration with menu and sidebar

your_project_page.php

...

<body>

    ...

    <iframe id="iframe" src="csv-import-export/" frameborder="0" style="width: 100%; border: none;"></iframe>

    ...

    <script src="csv-import-export/vendor/iframe-resizer/iframeResizer.min.js"></script>
    <script>iFrameResize({log:true}, '#iframe')</script>

</body>
import-list.php (and all other files)

...

<body>

    <?php
    // NAVBAR & SIDEBAR
    $current_page = basename(__FILE__, '.php');
    include('navbar-sidebar.php');
    ?>

	<div id="main" class="with-navbar with-sidebar">

        <h1>Import list</h1>

        <div class="panel clearfix">
            <div class="panel-body">

                ...

            </div>  <!-- panel-body -->
        </div>  <!-- panel -->

        ...

    <!-- Iframe Resizer -->
    <script src="vendor/iframe-resizer/iframeResizer.contentWindow.min.js"></script>

</body>

One page integration without menu, sidebar and panel

your_project_page.php

...

<body>

    ...

    <ul id="my-project-menu">
        <li class="active"><a href="my-project-import.php">Import</a></li>
    </ul>

    ...

    <iframe id="iframe" src="csv-import-export/import.php" frameborder="0" style="width: 100%; border: none;"></iframe>

    ..

    <script src="csv-import-export/vendor/iframe-resizer/iframeResizer.min.js"></script>
    <script>iFrameResize({log:true}, '#iframe')</script>

</body>
import.php (and all other files)


...

<body>

	<div id="main">

        <!-- <div class="panel clearfix"> You could also removed this 2 lines and also the closing divs -->
            <!-- <div class="panel-body"> -->

                ...

            <!-- </div> -->  <!-- panel-body -->
        <!-- </div> -->  <!-- panel -->

        ...

    <!-- Iframe Resizer -->
    <script src="vendor/iframe-resizer/iframeResizer.contentWindow.min.js"></script>

</body>

Bootstrap

CIE is compatible with bootstrap. So, if your project is built on bootstrap and you want CIE to look a like your project, you just need to include your bootstrap.css.