Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MTDDC Meetup TOKYO 2016

1,152 views

Published on

MT7を先取り!? DataAPI と Riot.js で作るユーザフレンドリーなダッシュボード

MTの管理画面カスタマイズといえば MTAppjQuery と紹介いただくことが多くなりました。 しかし案件ごとにDataAPIを使ったオリジナルダッシュボードを作れば使いやすさはどこまでよくなるのでしょう? jQuery に変わるとも言われるJSフレームワークが多く出てきている中、DataAPIとRiot.js でオリジナルダッシュボードを作って検証してみました

Published in: Internet
  • Be the first to comment

MTDDC Meetup TOKYO 2016

  1. 1. @mersy
  2. 2.
  3. 3. NZ New !!
  4. 4. ƭ ƭ
  5. 5. 
 NEW
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10. 
 ⭐
 
 
 ⭐
 ⭐
  11. 11. <mt:setvarblock name="scheduled_button_title"><__trans phrase="Save this [_1]" params="<mt:var name="object_label">"></mt:setvarblock> <mtapp:setting id="status" label="<__trans phrase="Status">" label_class="top-label" help_page="entries" help_section="status"> <mt:unless name="sitepath_configured"> <input type="hidden" name="status" id="status" value="1" /> <span><__trans phrase="Unpublished"></span> <span class="alert-warning-inline"><img src="<$mt:var name="static_uri"$>images/status_icons/warning.gif" alt="<__trans
  12. 12. sub foo { my ($cb, $app, $param, $tmpl) = @_; ... $innerHTML =~ s/(,s)$//; my $pointer_field = $tmpl->getElementById('ip'); my $label = '<__trans_section component="commentrating"><__trans phrase="Rating"></__trans_section>'; my $hint = '<__trans_section component="commentrating"><__trans phrase="It is the value that evaluated a entry with five phases."></ __trans_section>'; my $nodeset = $tmpl->createElement('app:setting', { id => 'rating', label => $label, hint => $hint, show_hint => 0 }); $nodeset->innerHTML($innerHTML); 

  13. 13.
  14. 14.
  15. 15.
  16. 16. 
 

  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21. ‣ ‣
  22. 22. ‣ 
 ‣ 
 ‣ 

  23. 23. ‣ ‣ ‣
  24. 24. 
 <mtapp-entries
 table_label=" "
 site_id="1"
 api_limit="20"
 api_fields=“id,title,tags"></mtapp- entries>
  25. 25. 
 
 <mtapp-form-entry></mtapp-form-entry>

  26. 26. <!-- --> <mtapp-entries> <table class="table table-bordered bp-view" id="{ table_id }"> <thead class="thead-inverse"> <tr>...</tr> </thead> <tbody> <tr each="{ item, items_index in items }"> <td each="{ field in fields }" class="align-middle">
 { item[field] }</td> </tr> </tbody> </table> HTML
  27. 27. <style scoped> .bp-items { overflow-x: scroll; } </style> <script> // Data API api.listEntries(that.site_id, params, function (response) { // `mtapp-items` that.items = response.items; that.update(); }); </script> </mtapp-entries> JavaScript CSS
  28. 28. 
 
 
 

  29. 29.
  30. 30. <div class="form-group">
 <label> </label>
 <input class="form-control" 
 type="color" name="keywords">
 </div> <mtapp-form-parts 
 form_type="color" basename="keywords"
 label=" "></mtapp-form-parts>
  31. 31. 
 

  32. 32. 5mini
  33. 33.
  34. 34. MT::Lover::bitpart Update bit part, everyday!!

×