NAV2017:How to set Add-in Graphical area size inside a page (javascritp)

davide.mazzilli@infostudi.it

Hi to all,
I would like to do a Javascript control Add-in to draw something inside a page.

I would like it occupies the 100% of NAV page (100% of the field, inside a group in a container) and I would like it resizes when the page resizes.

I tested it with a drag and drop add in I found on Vjeko page.
I tried to play with many parameters of the CSS and with the Manifest xml file, but the result is never what I want.

I think the problem is inside NAV (or related to the way NAV interact with the addin) because in a simple HTML Page I get what I want.

This is what I've got until now (I added the same Page part to a factbox and as a part of the main Container)



The Height Of the Factbox, included the Delete Picture button is the same of the height of the image, inside the main body, and It looks exactly the size in the Manifest.XML file. As u can see, there is no button in the main body, due to the height of the control.



This is the part related to the controls hierarchy (forget about any compiler errors, because I just added some returns to the inline code):


This is the CSS with (part) of my attempts:



What I would like to achieve is that the add-in area is as large as the main page area (width 100%, Height 100%), respecting a minimum size (so with scroll bars if needed), and that the appearance in the Web Client is the same of the RTC client.

Thanks in advance
Davide

(Note: forget about any copyright on the pics. It is mine)

da_neal

You want make background picture on page?

davide.mazzilli@infostudi.it

No da_neal, this is just a pre-work to something bigger. What I want is to manage the add in area to grow and shrink like a winform, in both RTC client and web client.

The image is just part of the drawing pain (to see if it grows or not)
thanks

EvR

The only way I got it to behave like that, is using javascript/jquery.
At least this way it re-scales when your resize the window.

Customize it to your needs:

$(window).on('resize', function () {
    $("#controlAddIn").width($(this).width()).height($(this).height() - 21);
});

And in the manifest, also customize to your needs:

<RequestedHeight>400</RequestedHeight>
<RequestedWidth>400</RequestedWidth>
<VerticalStretch>true</VerticalStretch>
<HorizontalStretch>true</HorizontalStretch>

PS. You can still make the 'append' part of your javascript the look way you want. Just add a '\' to each line end.
PS2. I think it's a bad design to have references to external resources in your manifest or javascript/css. If for whatever reason jquery.com isn't available to the client, your add-in won't work.

davide.mazzilli@infostudi.it

Thanks EvR,

I will follow your hint about jquery. I am complete newbie in it.

I tried your hints on both RTC and Webclient NAV2017 (no CU installed).

I just made a little change to catch the resize end (to test if the resizing was firing any events, with a message).

It seems that all work fine on RTC, but Webclient still ignore the scaling of the control addin Area

Here the 2 differents behavior.
RTC:

Webclient:


As you can see from the scrollbar on the right, the control add-in area in the webclient doesn't fill the available space. I start thinking it could be a "platform" problem.

I used a manifest like yours to test.

Thanks
Davide