Inline Javascript. - General Discussions - General Discussions - Progress Community
 General Discussions

Inline Javascript.

  • Inline Javascript.
  • Hello,

    Im trying to insert javascript in a template that gets the latest news of the company from another site. I am able to do this easily through the css widget, but I have to include the javascript in the middle of a content block because of css issues. (unless there is a way to set a wrapper class for the javascript widget??)  When I try to insert the script on the html, it gets erased once I press ok or switch between source/design. Is there a way to do this?? I saw some other threads that mentioned to set to "true" allowscripts and contentfilters to "none" but I cant find these properties or the files (ControlTemplates) anywhere.. which brings me to another question... when I click on "Edit on visual studio" VS pulls up the solution, but all the default.ascx files are completely empty although I have three published pages and a template throught the sitefinity UI. So whenever I see some solutions on the threads that require editing the project on VS, Im not really sure what to edit. (Im probably looking at the wrong place or something :/ ).

    Thanks for your time!
  • 242432_mapdesigner.png
    Hello John,

    You can map the ContentBlockDesigner


    2. Add the following

    in the ascx

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
     
    <sf:ResourceLinks id="resourcesLinks" runat="server">
        <sf:ResourceFile Name="Styles/Window.css" />
    </sf:ResourceLinks>
     
    <sf:FormManager ID="formManager" runat="server" />
    <div style="width: 660px; overflow: hidden;">
        <sf:HtmlField
            ID="htmlEditor"
            runat="server"
            Width="99%"
            Height="370px"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sf:HtmlField>
    </div>
    <script type="text/javascript">
        $("body").addClass("sfContentBlockDesigner");
    </script>

    Change EditorContentFilters. Then you can set the ContentFilters you want to have.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Ivan,

    I want to use the ContentBlock in my custom control designer to set a string property in a custom widget (created as a usercontrol). I have successfully hooked up everithing and it is showing content block editor when i go to the edit view of the control. Now the chellenge I have is to get the entered content and and set it to the property in the widget. The following two functions in the designer.js fails when loading or saved.

    Previously I used RadEditor instead and these functions worked without any trouble. Can you tell me what i need to do inorder to read/set the content input from the custom control designer?

    //refreshes the UI overrides the base interface
        refreshUI: function ()
            this._refreshMode = true;
            var data = this.get_controlData();
              
            this.get_contentBlockControlTop().set_html(data.ContentTop)
        ,
      
        // forces the designer to apply the changes on UI to the cotnrol Data buth
        applyChanges: function ()
            var data = this.get_controlData();
              
            data.ContentTop = this.get_contentBlockControlTop().get_html();
        

    Thanks!
    Duneel
  • Hello,

    I solved the above problem by changing the set_html() and get_html() to as follows...
    //refreshes the UI overrides the base interface
        refreshUI: function ()
            this._refreshMode = true;
            var data = this.get_controlData();
      
            this.get_contentBlockControlTop()._setEditorHtml(data.ContentTop);
        ,
      
        // forces the designer to apply the changes on UI to the cotnrol Data buth
        applyChanges: function ()
            var data = this.get_controlData();
            data.ContentTop = this.get_contentBlockControlTop().get_value();
        

    Thanks!
    Duneel
  • Hey I'm having the same problems and the one thing im missing from this is:

    this.get_contentBlockControlTop()

    Can you share the markup for that function?
  • Hi Jerami,

    Here is the complete client-side code I'm having.

    Type.registerNamespace("Samples.ControlDesigners.CertifiedAgents");
      
    Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner = function (element)
      
        // Elements
        this._contentBlockControlTop = null;
        this._contentBlockControlBottom = null;
        Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.initializeBase(this, [element]);
      
    Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.prototype =
      
        initialize: function ()
            Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.callBaseMethod(this, 'initialize');
      
        ,
      
        dispose: function ()
            Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.callBaseMethod(this, 'dispose');
      
        ,
      
        // Top Content
        get_contentBlockControlTop: function ()
            return this._contentBlockControlTop;
        ,
        set_contentBlockControlTop: function (value)
            this._contentBlockControlTop = value;
        ,
      
        // Bottom Content
        get_contentBlockControlBottom: function ()
            return this._contentBlockControlBottom;
        ,
        set_contentBlockControlBottom: function (value)
            this._contentBlockControlBottom = value;
        ,
      
        /* ----------------------------- Public Mthods ----------------------------- */
      
        // Refreshes the UI overrides the base interface
        refreshUI: function ()
            this._refreshMode = true;
            var data = this.get_controlData();
              
            // set values....
            if (data.DetailsPageURL != null)
                $("#DetailsPageURL").val(data.DetailsPageURL);
            
            this.get_contentBlockControlTop()._setEditorHtml(data.ContentTop);
            this.get_contentBlockControlBottom()._setEditorHtml(data.ContentBottom);
        ,
      
        // Forces the designer to apply the changes on UI to the cotnrol Data buth
        applyChanges: function ()
            var data = this.get_controlData();
              
            // Get values....
            data.DetailsPageURL = $("#DetailsPageURL").val();
            data.ContentTop = this.get_contentBlockControlTop().get_value();
            data.ContentBottom = this.get_contentBlockControlBottom().get_value();
        
      
    Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner.registerClass('Samples.ControlDesigners.CertifiedAgents.CertifiedAgentsDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
      
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    And in the designer you need to register the ID's for the content controls as follows.

    /// <summary>
            /// Gets script descriptors.
            /// </summary>
            /// <returns>ScriptDescriptor.</returns>
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
      
                var contentBlockControlTop = this.ContentBlockTop;
                var contentBlockControlBottom = this.ContentBlockBottom;
      
                desc.AddComponentProperty("contentBlockControlTop", contentBlockControlTop.ClientID);
                desc.AddComponentProperty("contentBlockControlBottom", contentBlockControlBottom.ClientID);
      
                return scriptDescriptors.ToArray();
            
      
    /// <summary>
            /// Gets the top content block control instance.
            /// </summary>
            protected virtual HtmlField ContentBlockTop
            
                get
                
                    return this.Container.GetControl<HtmlField>("htmlEditorTop", true);
                
            
      
            /// <summary>
            /// Gets the bottom content block control instance.
            /// </summary>
            protected virtual HtmlField ContentBlockBottom
            
                get
                
                    return this.Container.GetControl<HtmlField>("htmlEditorBottom", true);
                
            

    Let me know If you have any other questions,

    Cheers!
    Duneel

  • Thanks I got it working now...i was missing the GetScriptDescriptors() method.

    public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()


  • Hi Duneel, 

    Your code has been very helpful. Could you answer two questions for me?

    1. What do ContentTop and ContentBottom correspond to? I tried switching this for the ID of the HtmlField in my designer template, the control name, and anything else I can think of, and nothing worked.

    2. The line below threw an error... is it correct?
    var desc = (ScriptControlDescriptor)scriptDescriptors.Last();

    Thanks!

    Michael Snyder
  • Hi Michael,

    ContentBlockTop and ContentBlockBottom corresponds to two HTMLField controls available in my designer template (.ascx). In designer.cs file I need to register the ClientIDs of the two controls so they are available to the javascript file.

    This is what I have in my designer.cs file for the two fields.

    /// <summary>
            /// Gets the top content block control instance.
            /// </summary>
            protected virtual HtmlField ContentBlockTop
            
                get
                
                    return this.Container.GetControl<HtmlField>("htmlEditorTop", true);
                
            
      
            /// <summary>
            /// Gets the bottom content block control instance.
            /// </summary>
            protected virtual HtmlField ContentBlockBottom
            
                get
                
                    return this.Container.GetControl<HtmlField>("htmlEditorBottom", true);
                
            
      
    /// <summary>
            /// Gets script descriptors.
            /// </summary>
            /// <returns>ScriptDescriptor.</returns>
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var desc = (ScriptControlDescriptor)scriptDescriptors.Last();
      
                var contentBlockControlTop = this.ContentBlockTop;
                var contentBlockControlBottom = this.ContentBlockBottom;
      
                desc.AddComponentProperty("contentBlockControlTop", contentBlockControlTop.ClientID);
                desc.AddComponentProperty("contentBlockControlBottom", contentBlockControlBottom.ClientID);
      
                return scriptDescriptors.ToArray();
            


    Cheers,
    Duneel
  • How to create dynamic tab in the sitefinity custom widget and put the content for there respective tab. Please suggest