External content


#1

Hi

How is it possible to display an external website with agile ui inside the workspace (leftside Menu, Menubar top)?

Just referring an external link clears the menus.


#2

Hi Wolfgang.

Can you please explain what you are trying to do in more detail?


#3

Hi Romanish,

sure. I want to create a web application which controls the settings of an already existing web app. I also want to embed the existing app, so that I can can instantly see the result of seetings being changed.
I thought the admin template is exactly what I was looking for, with a vertical menubar on the left side and a menubar on the top.
My question is how can I achieve this ? I tried working with:
$app->layout->menuLeft->addItem([‘Monats- und Jahresberichte’, ‘icon’ => ‘block layout’],“http://externalapp.com”);

When I click on the menuitem, the menu disapears and the external app fills the screen completely. I need something like an IFrame, Do you have an idea ?


#4

Hi Wolfgang,

a quick idea:
add an extra layout you can pass to the app (standard installation has 5 layouts in \vendor\atk4\ui\src\Layout) and a corresponding template that does exactly what you need: In this extra layout, you define an IFrame loading the data you need and copy the admin menue from the admin layout.

In the menue, define a normal link like
$app->layout->leftMenu->addItem(['‘Monats- und Jahresberichte', 'icon'=>'block layout'], 'monats-und-jahresberichte.php');

in monats-und-jahresberichte.php, tell the app to use your extra layout:
$app->initLayout('YourNewLayout');

So all other pages work with the normal admin layout, and your page Monats- und Jahresberichte just has the copied admin menue and the IFrame loading the external data.

Think this should work.

Best regards
Philipp


#5

@philipp suggestion recommends you to integrate other app with Agile UI. If you cannot do that, try this:

  1. Point link to the “external.php”
  2. Inside external, include the code that populates your menus etc
  3. Add iframe like this:
$app->add(['element'=>'iframe'])
    ->setAttr('src'=>'http://externalapp.com');

Hopefully this helps.


#6

Gents, thanks for the reply.
Obviously I am more on a beginner level, but Romaninsh’s proposal looks easier, but still too complicated for me.
Can you post a little more code, as the snippet seams not to work in my environment.

Thanks.


#7

OK, posting full code for you:

include 'vendor/autoload.php';
$app = new \atk4\ui\App();
$app->initLayout('Admin');
$app->add(['element'=>'iframe'])
    ->setAttr('src', 'http://agiletoolkit.org/')
    ->addStyle(['width'=>'100%', 'height'=>'900px']);

Result:


#8

Hey, it works now! thanks a lot.
Maybe some html or stylsheet excercise, How can I get the iFrame be aligned left so that it fits closely to the menu bar on the left sie ?
Currently it seems that the iFrame is displayed centered.


#9

Only with some HTML and CSS styling. It’s beyond the basic features of ATK. I know i need to write some tutorials on using custom HTML, but now focus is on 1.4 release.


#10

Hi Wolfgang,

you know tools like Firebug for Firefox? With these, you can easily see all CSS definitions for any HTML element and also see from which file the come from.

In the standard admin Layout, any content in the “main window” is wrapped in

 <main class="atk-mainContainer">
      <div class="ui main container basic segment very padded">

the <div> has a standard padding of 3em causing the distance.
Change this to 0 and the IFrame should take all the space outside the menues.

If you do this directly in semantic.css, you will have a hard time to update this file. IMO its better to create your own style sheet and overwrite the settings in there:

With $app->requireCSS, you can easily load your own CSS file into the HTML output:
$app->requireCSS('your_own.css');

in your_own.css, overwrite the settings:

.ui.main.container {
	padding:0;
}

Did the same here.
Best regards
Philipp


#11

This is where some user-contributed tutorials could do awesomely well. :slight_smile: I myself stay away from CSS by a mile.