Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Finance | Project Operations, Human Resources, ... / Using Extensible contr...
Finance | Project Operations, Human Resources, ...
Suggested answer

Using Extensible control to show custom HTML code with CSS.

(1) ShareShare
ReportReport
Posted on by Eisenberk 87
Hello folks,
 
I am making a custom control to visualize html code with css. Since FormHTMLControl is deprecated, i am following the tutorial from: https://learn.microsoft.com/en-us/dynamics365/fin-ops-core/dev-itpro/user-interface/build-extensible-control
 
I created the classes 'mycontrol' and 'mycontrolbuild'. Also, i added the css and html resources. Now, before i begin to create the javascript file. I would like to test how the html code in the html file works with defualt values.
 
This is my html code in the html file:
 
<link href=//resources/styles/mycss.css/ rel=/stylesheet/ type=/text/css/ />
<div id=/mycontrol/ data-dyn-bind=/text:'test'/>
    <img id=/testimage/ src=https://mywebsite.com/test-image.jpg/
</div>
 
I added the control on a form. When i open the form, appears the /test/ text but nothing else. Why isn't the image displayed?
 
In the end i would like to add some <div>, since my project requierement is to show a custom html with css. How i do bind html code? 
 
Thanks in advance,
Eisenberk.
 
 
  • hca Profile Picture
    hca 128 on at
    Using Extensible control to show custom HTML code with CSS.
    Hi
     
    The use of the "$" sign in this case, what is your intention behind it? It might not mean the same in the context of Finance and Operations as you expect. It was my experience that jQuery is not working as you expect in this environment.
     
    If you try to get to the element by using "document.getElementById('mydivID')", are you able to get the element that way?
  • Suggested answer
    Judy Profile Picture
    Judy Microsoft Employee on at
    Using Extensible control to show custom HTML code with CSS.
    Hi, thanks for your sharing. please post on the Finance Forum for more assistance.
    • Please Check the image URL, ensure that the image URL "https://mywebsite.com/test-image.jpg" is correct and accessible. You can try opening the image URL directly in a web browser to verify if it loads correctly.
    • For your code, you should make sure that the '<img>' tag is properly closed with a closing angle bracket '>'. Also, ensure that the "id" attribute value matches the one used in the JavaScript code or CSS styling.
    • Please review the CSS styles defined in the "mycss.css" file. Ensure that there are no conflicting styles or rules that might be affecting the display of the image. You can use browser developer tools to inspect the applied styles and troubleshoot any potential issues.
     
    Best Regards,
    Judy
     
  • Eisenberk Profile Picture
    Eisenberk 87 on at
    Using Extensible control to show custom HTML code with CSS.
    Hi Bharani Preetham Peraka,
     
    Indeed, .js file was necessary. My next problem is how to change a <div> value from the js file. I tried the code: 
     
    $('#mydivID').update(newValue)
     
    But it doesn't seems to work. I am not sure how to access  and modify the html content from the js file.
  • Suggested answer
    Bharani Preetham Peraka Profile Picture
    Bharani Preetham Pe... 3,622 Moderator on at
    Using Extensible control to show custom HTML code with CSS.
    As per my understanding you still require a js file to call this html code. Without much code too for fno this is required to call html file. So just add these html and css in the resources and call them by providing location in js file. Then it works.
  • Eisenberk Profile Picture
    Eisenberk 87 on at
    Using Extensible control to show custom HTML code with CSS.
    Ok, just to inform. Javascript file was necessary to show the main <div>. Keep working on it.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Daivat Vartak – Community Spotlight

We are honored to recognize Daivat Vartak as our March 2025 Community…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Kudos to the February Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 293,043 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,864 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156 Moderator

Leaderboard

Featured topics

End-of-life Announcement for Microsoft Dynamics GP

Product updates

Dynamics 365 release plans