Dynamics Community Forum Thread Details

Sections on form overlapping after hiding a webresource

Hi,

On our form we have a tab with 3 columns.

The one in the middle contains 3 webresource, a number of multiple line text fields and a few single line text fields.

One of the single line text fields contains input text that is longer than what can be visualised on the screen. So it gets truncated visually.

However when one of the webresources gets hidden based on a condition (by using the setVisible attribute of the control), the layout gets messed up. The text that is truncated will now be displayed and overlaps with the third column.

I figured out that in de fromControls.js, the layout for the section table gets changed from fixed to auto when a control is put invisible.

I see two options:

- create extra sections (but users will complain about the not needed whitespace)

- use a webresource for the long text field.

As we will do a migration to online, we would like an OOB solution.

Has anyone suggestions?

Below is the code for the second webresource (one html page) that will mess up the layout when put invisible.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
        <style type="text/css">
            body{
                margin: 0;
                margin-left: 20px;
            }
            .star{
                cursor:pointer;
            }
            .star.selected{
                color:orange;
            }
        </style>
	</head>
	<body>
	    <div id="stars">
            
        </div>
        <script type="text/javascript" src="../../../ClientGlobalContext.js.aspx"></script>
        <script src="../Js/JQuery.latest.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../Js/CRMExtensions.js"></script>
        <script type="text/javascript" src="../Js/MultiLanguageCRMExtensions.js"></script>
        <script type="text/javascript">
            var starcount = 5;
            var fieldName = "";
            var initialStars = 0;

            $(function () {
                var data = getDataParameter();
                if (data) {
                    var params = JSON.parse(data);
                    if (params) {
                        if (params.starcount) {
                            starcount = params.starcount;
                        }
                        if (params.field) {
                            fieldName = params.field;
                            debugger;
                            var fieldValue = parent.Xrm.Page.getAttribute(fieldName).getValue();
                            if (fieldValue) {
                                initialStars = parseInt(fieldValue);
                            }
                        }
                    }
                }

                for (var i = 0; i < starcount; i++) {
                    var starx = $("<span class='star' title='" + translate(helpText[i+1]) + "'>&#9734;</span>");
                    $("#stars").append(starx);
                }

                $(".star").slice(0, initialStars).each(function (starindex, star) {
                    $(star).html("&#9733;");
                    $(star).addClass('selected');
                });

                $(".star").click(function () {
                    
                    $(".star").each(function (starIndex, star) {
                        $(star).html("&#9734;");
                        $(star).removeClass('selected');
                    });

                    $(this).html("&#9733;");
                    $(this).addClass('selected');
                    $(this).prevAll().html("&#9733;");
                    $(this).prevAll().addClass('selected');

                    if (fieldName) {
                        var count = $(".star.selected").length;
                        parent.Xrm.Page.getAttribute(fieldName).setValue(count);
                    }
                });
            });

            function getDataParameter(paramName) {
                if (!paramName) paramName = "data";

                paramName = paramName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                var regexS = "[\\?&]" + paramName + "=([^&#]*)";
                var regex = new RegExp(regexS);
                var results = regex.exec(decodeURIComponent(window.location.href));
                if (results === null) return "";
                else return results[1];
            }

            function translate(input) {
                if (CrmExtensions._multiLanguageTranslator && input != null && input != undefined && (typeof input === "string"))
                    return CrmExtensions._multiLanguageTranslator.getTranslation(input);
                else
                    return input;
            }

            var helpText = [];
            helpText[1] = "1 star: Poor, Lead is not relevant. Profile of the prospect/client does not correspond with he suggested offer/area of interest and is not useful at all.|1 Ster: Slecht, deze Lead is niet relevant. Het profiel van de prospect / klant stemt niet overeen met het voorgestelde aanbod/interessegebied en daardoor helemaal niet bruikbaar.|1 étoile: Faible, piste très peu prometteuse. Le profil du prospect/client ne correspond en rien à l'offre / au domaine d'intérêt proposé(e) et n'est d'aucune utilité.|1 Stern: Schlecht, Kontakt ist nicht relevant. Profil des (potenziellen) Kunden entspricht nicht dem vorgeschlagenen Angebot / Interessengebiet und ist in keiner Weise nützlich.";
            helpText[2] = "2 stars: Mediocre, somewhat relevant lead. Profile of the prospect/client does not correspond with he suggested offer/area of interest, but it is useful as an opener for general discussion.|2 Sterren: Middelmatig, enigszins relevante Lead. Het profiel van de prospect / klant stemt niet overeen met het voorgestelde aanbod/interessegebied, maar is bruikbaar als opener voor een algemeen gesprek.|2 étoiles: Médiocre, piste peu prometteuse. Le profil du prospect/client ne correspond en rien à l'offre / au domaine d'intérêt proposé(e), mais peut servir d'entrée en matière pour un entretien d'intérêt général.|2 Sterne: Mittelmäßig, Kontakt von gewisser Relevanz. Profil des (potenziellen) Kunden entspricht nicht dem vorgeschlagenen Angebot / Interessengebiet, ist aber nützlich als Einstieg in eine allgemeine Diskussion.";
            helpText[3] = "3 stars: Average, somewhat relevant lead. Profile of the prospect/client is interesting, but not for the suggested offer/area of interest|3 Sterren: Gemiddeld, enigszins relevante Lead. Het profiel van de prospect / klant is interessant, maar niet voor het voorgestelde aanbod/interessegebied.|3 étoiles: Moyen, piste relativement prometteuse. Le profil du prospect/client est intéressant mais ne correspond pas à l'offre / au domaine d'intérêt proposé(e).|3 Sterne: Durchschnittlich, Kontakt von gewisser Relevanz. Profil des (potenziellen) Kunden ist interessant, aber nicht für das vorgeschlagene Angebot / Interessengebiet.";
            helpText[4] = "4 stars: Good, relevant lead. Profile of the prospect/client corresponds partially with the suggested offer/area of interest.|4 Sterren: Goede, relevante Lead. Het profiel van de prospect / klant stemt deels overeen met het voorgestelde aanbod/interessegebied.|4 étoiles: Bon, piste prometteuse. Le profil du prospect/client correspond partiellement à l'offre / au domaine d'intérêt proposé(e).|4 Sterne: Gut, relevanter Kontakt. Profil des (potenziellen) Kunden entspricht zum Teil dem vorgeschlagenen Angebot / Interessengebiet.";
            helpText[5] = "5 stars: Excellent, relevant lead. Profile of the prospect/client corresponds with the suggested offer/area of interest|5 Sterren: Uitstekende, relevante Lead. Het profiel van de prospect / klant stemt overeen met het voorgestelde aanbod/interessegebied.|5 étoiles: Excellent, poste très prometteuse. Le profil du prospect/client correspond parfaitement à l'offre / au domaine d'intérêt proposé(e).|5 Sterne: Exzellenter, relevanter Kontakt. Profil des (potenziellen) Kunden entspricht dem vorgeschlagenen Angebot / Interessengebiet.";


        </script>
	</body>
</html>

centralPaneController.prototype.signalsLoaded = function (data) { if (data && data.Output) { var data = JSON.parse(data.Output); var self = this; this.signalDataParse(data.signals, self); this._viewModel.signals.removeAll(); this._viewModel.signals.push.apply(this._viewModel.signals, data.signals); var webresourcecontrol = Xrm.Page.getControl("WebResource_CentralSignals"); if (webresourcecontrol && data.signals.length > 0) { webresourcecontrol.setVisible(true); } } };

Quick Links

Leaderboard