Příklad: Vložení videa do stránky

V tomto příkladu se podíváme, jak vložit video do ObjectGears stránky.

Uživatel ObjectGears může pomocí HTML editoru jednoduše tvořit formátovaný text obsahující například tabulky nebo obrázky. Pokud však chceme vložit video, musíme běžnému uživateli umožnit, aby vložil odkaz, který se pak ve stránce zobrazí jako spustitelné video. Tento přístup je použit například ve Znalostní bázi nebo Verzované dokumentaci.

Chceme, aby uživatel vložil odkaz formou závorkového příkazu (např. {{VideoYT,OujK_NgaPwM}} nebo {{Vimeo,25924530}}), který bude součástí HTML textu zadaného ve sloupci typu Text. Tento text pak zobrazíme ve stránce a závorkový příkaz bude nahrazen videem jako zde:

V první řadě musíme zajistit, aby stránka při zobrazení načetla článek, který obsahuje text. V našem příkladu bude článek dán parametrem v URL. V detailu stránky na záložce Skript proto definujeme:

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

  //je něco v url zadano a je změna textu ve webpartu vyhledavani
  if (kb != null && !OGWebParts['find-text'].IsTextChanged)
  {
    //nacist tridu Clanek
    var cl = OGModel.ClassDefs['article'];

    //nacist clanek, pokud je, tak jej nastavit do WP skript
    var article = LoadArticle(kb, cl);
    if (article != null)
    {
      OGWebParts['text'].SetData('article', article);
    }
  }
}

//Metoda nacte clanek
function LoadArticle(kb, cl)
{
  var colNumber = OG.Column.GetByCode(cl.Id, 'number');
  var colPublished = OG.Column.GetByCode(cl.Id, 'published');

  //vytvořit filtr pro hledani
  var f = OG.DataRow.GetDataRowFilter(cl.Id);
  f.Filter_LoadSubEntity = true; //nacist i nasobne sloupce
  f.Filter_OnlyActive = true; //pouze aktivni
  f.SetColumnData(colPublished.Id, true); //jen publikovane clanky
  f.SetColumnData(colNumber.Id, kb); //hledat podle KB

  //nacist clanek dle filtru
  var drList = OG.DataRow.GetDataByFilter(f);
  if (drList != null && drList.Count == 1)
  {
    return drList[0];
  }
  return null;
}

Do stránky pak vložíme webpart Skript, který zpracuje článek, který mu byl předán:

function OnPreRender()
{
    //prevzit clanek, ktery se nacetl ve strance
    var article = OGWebPart.GetData('article');
    if (article != null)
    {
        //nacist potrebne tridy a sloupce
        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);

        //vytvorit instanci pro ulozeni textu
        var sb = new System.Text.StringBuilder();

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

        //pridat do stranky
        OGForm.AddControl(OGForm.CreateLiteralControl('lc1', sb.ToString()));
    }
}

Nyní můžeme nechat uživatele vytvářet články, do nichž vkládají odkazy na videa formou závorkových příkazů a ty jsou zobrazeny k přehrání při zobrazení stránky s článkem.