AXForum  
Вернуться   AXForum > Microsoft Dynamics NAV > NAV: Blogs
NAV
Забыли пароль?
Зарегистрироваться Правила Справка Пользователи Сообщения за день Поиск Все разделы прочитаны

 
 
Опции темы Поиск в этой теме Опции просмотра
Старый 12.12.2018, 00:17   #1  
Blog bot is offline
Blog bot
Участник
 
25,459 / 846 (79) +++++++
Регистрация: 28.10.2006
Navigate Into Success: Abusing Images property to load HTML in control add-ins
Источник: http://vjeko.com/abusing-images
==============

One of major limitations of control add-ins is not being able to define HTML. It seems so unbelievably unbelievable, that anyone looking at it from the outside of the NAV/BC playground may say “obviously, you must be missing something!”. But I am not. The one thing that you would expect to find first when defining a control add-in (and control add-ins in NAV/BC are nothing more than pieces of HTML that live within the allocated area of your browser real estate) is to be able to define the HTML. And yet, you can’t define it. The only way to show any UI from your control add-in is to procedurally create any of your control add-in HTML.

This makes no sense. No. Sense.



Imagine you want to show a button that shows a message when clicked:



You can do it like this:

</ppp style=”background: #1e1e1e;”>
var
button = document.createElement(“button”);
button.innerText = “Hello, World!”;
button.addEventListener(“click”, function () {
alert(“I was clicked!”);
});
document
.getElementById(“controlAddIn”)
.appendChild(button);


… or like this:

</ppp style=”background: #1e1e1e;”>
$(“#controlAddIn”)
.append($(“”)
.text(“Hello, World!”)
.click(function () {
alert(“I was clicked!”);
}));


Either way, what you really want to do is this:

</ppp style=”background: #1e1e1e;”>
Hello, World!</span style="color: #569cd6;"buttonspan style="color: gray;">

function
helloWorldClick() {
alert(“I was clicked!”);
}
</span style="color: #569cd6;"scriptspan style="color: gray;">
</span></span></span></span></span></span></span></span></span></span></span></span>

Without going into the bestpracticeness of the actual event-binding “pattern” I used here, my point was that HTML is best when written as HTML, not as JavaScript DOM or jQuery code.

So, how do you get to write HTML and then have your control add-in load that specific HTML, instead of you having to procedurally create it? If your answer is this:

</ppp style=”background: #1e1e1e;”>
$(“#controlAddIn”).append(‘Hello, World!’);


… then you are very wrong. That’s probably the worst way of handling it.

However, there is a way. (Ab)Using the “images” property of the controladdin object definition.

Let’s first take a look at what control add-in images really are. Take a look at this:

</ppp style=”background: #1e1e1e;”>
controladdin “Demo Control”
{
Images = ‘Demo/Png/Image.png’;
}


When you do this, you do not magically embed an image into the control add-in that is then magically shown as an image in the browser. For you to show that image in the browser, you need to (procedurally) create an element and set its src attribute to the URL of the image you want to show. Since you don’t know what the URL of your image at runtime will be (it will be placed in a random location under reach of IIS) there is a function you invoke to retrieve that URL: Microsoft.Dynamics.NAV.GetImageResource: it translates the declared image location from the controladdin definition into that random location where the ASP.NET layer of the NAV web client has stored the image. In the example above, it would translate ‘Demo/Png/Image.png’ into something like http://desktop-tfdoknj:8080/Dynamics.../Png/Image.png

At no time none of the parties involved (AL compiler, ASP.NET, your browser, your JavaScript code, Microsoft’s JavaScript code) care if your Image.png is actually a png image or whatever else, the only thing that anyone really cares in this process is translating one declared identifier (‘Demo/Png/Image.png’) to an actual URL. The extension doesn’t matter, the format doesn’t matter, the content doesn’t matter.

This means that you could easily do this if you want:

</ppp style=”background: #1e1e1e;”>
controladdin “Demo Control”
{
Images = ‘Demo/Html/Control.html’;
}


You can then put that HTML block from earlier into this Control.html. Your AL compiler will happily embed your Control.html file into your extension, your ASP.NET tier of the web client will happily extract that file into that “random” location, your GetImageResource file will happily translate ‘Demo/Html/Control.html’ into http://desktop-tfdoknj:8080/Dynamics...l/Control.html

The only thing that remains is to load that HTML and show it in your control add-in. To do it, you can use whichever flavor of Ajax you prefer. It can be the plain XMLHttpRequest approach (which can be painful to implement) or it can be $.get from jQuery (which is extremely simple but requires you to load jQuery). The simplest of all is using jQuery:

</ppp style=”background: #1e1e1e;”>$(“#controlAddIn”).load(Microsoft.Dynamics.NAV.GetImageResource(“Demo/Html/Control.html”));


And that’s it! With this simple trick, you can now do your HTML as HTML and not write procedural code to define any UI ever in the future.

Sure thing, this entire demo is available for you here: https://github.com/vjekob/controladdin-html

And yes, I sincerely hope at some point in the future, Microsoft solves this in the framework so we don’t have to pull these kinds of tricks. But as the tricks go, this one isn’t that dirty at all.

Read this post at its original location at http://vjeko.com/abusing-images, or visit the original blog at http://vjeko.com. 5e33c5f6cb90c441bd1f23d5b9eeca34The post Abusing Images property to load HTML in control add-ins appeared first on Vjeko.com.




Источник: http://vjeko.com/abusing-images
__________________
Расскажите о новых и интересных блогах по Microsoft Dynamics, напишите личное сообщение администратору.
 

Похожие темы
Тема Автор Раздел Ответов Посл. сообщение
Navigate Into Success: By popular demand: The Muppet Show theme Blog bot NAV: Blogs 0 23.11.2018 23:14
Navigate Into Success: TempBlob Façade: a pattern proposition Blog bot NAV: Blogs 0 03.10.2016 09:11
Navigate Into Success: Control Add-ins and Version Compatibility Blog bot Dynamics CRM: Blogs 0 19.04.2015 05:57
Navigate Into Success: Drag and Drop File Upload for Microsoft Dynamics NAV 2013 R2 Blog bot Dynamics CRM: Blogs 0 12.03.2014 17:51
Navigate Into Success: Top 10 things I miss in .NET Interoperability in NAV 2013 Blog bot Dynamics CRM: Blogs 0 20.06.2013 02:04
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход

Рейтинг@Mail.ru
Часовой пояс GMT +3, время: 18:36.
Powered by vBulletin® v3.8.5. Перевод: zCarot
Контактная информация, Реклама.