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

    Article: AN0002378Updated: 08.12.2018

    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.

×