1. Example: Inserting video into page

    Article: AN0002378Updated: 13.12.2018

    In this example we will look how to insert a video into ObjectGears page.

    ObjectGears user can simply create formatted text containing e.g. tables and pictures by means of HTML editor. However, if we want to insert a video, we have to allow the user insert a link that will be then displayed in the page as a video that you can play. This approach is used e.g. in Knowledge base and Version Controlled Documentation.

    We want the user to insert the link in form of a bracket command (e.g. {{VideoYT,Chfd1NPElVE}} or {{Vimeo,25924530}}), which will be part of HTML text entered in column type Text. This text will be then displayed in page and bracket command will be replaced by video like this:

    First we have to ensure that the page reads the article that contains the text. In our example the article will be defined by a parameter in URL. Therefore, we define in the page detail on tab Script:

    function OnLoad()
    {
      //read ID from url
      var kb = OGForm.Page.Request.QueryString['KB'];

      //there is url parameter and text in the webpart search changed
      if (kb != null && !OGWebParts['find-text'].IsTextChanged)
      {
        //read class Article
        var cl = OGModel.ClassDefs['article'];

        //read article and set it to Webpart script
        var article = LoadArticle(kb, cl);
        if (article != null)
        {
          OGWebParts['text'].SetData('article', article);
        }
      }
    }

    //Method reads the article
    function LoadArticle(kb, cl)
    {
      var colNumber = OG.Column.GetByCode(cl.Id, 'number');
      var colPublished = OG.Column.GetByCode(cl.Id, 'published');

      //create filter for search
      var f = OG.DataRow.GetDataRowFilter(cl.Id);
      f.Filter_LoadSubEntity = true; //read also multiple columns
      f.Filter_OnlyActive = true; //only active
      f.SetColumnData(colPublished.Id, true); //only published articles
      f.SetColumnData(colNumber.Id, kb); //search by KB

      //read article according to filter
      var drList = OG.DataRow.GetDataByFilter(f);
      if (drList != null && drList.Count == 1)
      {
        return drList[0];
      }
      return null;
    }

    Then we insert webpart Script into the page, that will process the article that was passed:

    function OnPreRender()
    {
        //take over article that loaded by the page
        var article = OGWebPart.GetData('article');
        if (article != null)
        {
            //read necessary classes and columns
            var cl = OGModel.ClassDefs['article'];
            var colText = cl.Columns['new_text'];

            var text = article.GetText(colText.Id);

            format2 = '<iframe width="560" height="315" src="https://www.youtube.com/embed/{1}" frameborder="0" allowfullscreen></iframe>';
            text = OG.TextUtils.ReplaceBracketCommand( text, 'VideoYT', format2, null, null);

            format2 = '<video width="640" height="480" controls><source src="{1}" type="video/mp4">Your browser does not support the video tag.</video>';
            text = OG.TextUtils.ReplaceBracketCommand( text, 'Video', format2, null, null);

            format2 = '<iframe src="https://player.vimeo.com/video/{1}" width="640" height="360" frameborder="0" allowfullscreen></iframe>';
            text = OG.TextUtils.ReplaceBracketCommand( text, 'Vimeo', format2, null, null);

            //create instance to save the text
            var sb = new System.Text.StringBuilder();

            sb.Append('<div class="help">');
            sb.Append(text);
            sb.Append('</div>');

            //add into the page
            OGForm.AddControl(OGForm.CreateLiteralControl('lc1', sb.ToString()));
        }
    }

    We can let users now to create articles into which they insert links to videos in form of bracket commands and these are displayed for play when page with article is displayed.

×