Example: Inserting video into page

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.