Skip to content

shellyln/menneu-reporting-app-for-kintone

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits

images

images

 
 

src

src

 
 

LICENSE.txt

LICENSE.txt

 
 

README.md

README.md

 
 

package.json

package.json

 
 

Repository files navigation

📑 Ménneu Reporting App for kintone 📊

Create ✨beautiful✨ 📑📊reports📈📰 easily with Ménneu + kintone.

You can easily build the complex documents written in Markdown, HTML and LSX that including 🖼images, 📊charts, 🔷UML diagrams, barcodes and 2d codes (QR Code).

📢 tl;dr

  • You can build the reporting app by setting your kintone environment following the instructions below.
  • We do not provide the app template ZIP files.
  • Report definition can be written in Markdown or LSX.
    • LSX is JSX alternative notation written in Lisp.

📍 Features

  • Report definition written in Markdown or LSX
  • Report preview on design time
    • Fetching data for preview from the other apps.
  • QR code and barcodes (See Ménneu Playground > Demo (Markdown))
  • UML diagrams (Plant UML) (See Ménneu Playground > Demo (Markdown))
  • Charts (Chart.js) (See Ménneu Playground > Table and chart (Markdown))

💎 Example

🖼 Gallery

Reporting App - Edit view

Edit a report definition reportingapp-editview

Reporting App - List view

reportingapp-listview

Example App - List view

app-example-1

Example App - Report (definition is written in markdown)

report-example-1

Example App - Embedded report

images/embedded-report-1

💻 Requiments

  • kintone (>=Professional:en / >=Standard:jp)
  • browser
    • Google Chrome: latest
    • Firefox: latest

⚙️ Setup

📑📊 ReportingApp (帳票テンプレート App)

Create a report definition that written in Markdown or LSX with Ace editor.
You can create a report definition while viewing the preview.

JS and CSS

JS (PC, Mobile)

CSS

Fields

Field Code Caption Value Type Required
report_name レポート名 Textbox X
switches 設定 Scripting,LSX,Detail,List,LispData Checkboxes
report_template レポートテンプレート Textarea X
レポートテンプレート Label
report_template_ace BlankSpace
preview_data プレビュー用データ [{}] Textarea
プレビュー用データ Label
preview_data_appid プレビュー用データAppId 1 Textbox
preview_data_query プレビュー用データクエリ limit 1 Textbox
preview_data_btns BlankSpace
preview_data_ace BlankSpace
configs 設定 {"title":"example"} Textarea
設定 Label
configs_ace BlankSpace
作成者 作成者 creator X
作成日時 作成日時 createdDt X
更新者 更新者 modifier X
更新日時 更新日時 updatedDt X

Switches description

Value Description
Scripting Enable lisp LSX block expansion in markdown report_template
LSX report_template format is lisp LSX (otherwise format is markdown)
Detail Report is enabled in detail view of the app
List Report is enabled in list view of the app
LispData preview_data format is lisp (otherwise format is json)

reportingapp-fields

Example report definitions

Create the following records:

Report for list view (for multiple records)

Report_name
  • 旅費精算申請 (一覧)
Switches
  • Scripting, List
Report_template (markdown + lisp LSX scripting)
# 旅費精算申請 (一覧)

%%%($last
    ($defun $currency (v)
        ($to-locale-string "en-US" (# (style "currency") (currency "JPY")) ($to-number v)) )
    ($defun $percent (v)
        ($to-locale-string "en-US" (# (style "percent")) ($to-number v)) )
    ($defun sum (d col)
        (+ ...($map d (|-> (x) use (col) ($to-number ($get x ($last col) value))))) )
    nil)


| 出発                         | 帰着                         | 行き先                         | 旅費合計                                     | 経費合計                                     | 精算金額                                     |
|------------------------------|------------------------------|--------------------------------|---------------------------------------------:|---------------------------------------------:|---------------------------------------------:| %%%($=for $data """
| %%%($get $data "出発" value) | %%%($get $data "帰着" value) | %%%($get $data "行き先" value) | %%%($currency ($get $data "旅費合計" value)) | %%%($currency ($get $data "経費合計" value)) | %%%($currency ($get $data "精算金額" value)) | """)
|                              |                              |                                | %%%($currency (sum $data "旅費合計"))        | %%%($currency (sum $data "経費合計"))        | %%%($currency (sum $data "精算金額"))        |
Preview_data
[{
    "出発": {"value" : "a"},
    "帰着": {"value" : "b"},
    "行き先": {"value" : "c"},
    "旅費合計": {"value" : "1"},
    "経費合計": {"value" : "2"},
    "精算金額": {"value" : "3"}
}]
Configs
{
    "title": "旅費精算申請 (一覧)"
}

Report for detail view (for single record)

Report_name
  • 旅費精算申請 (個別)
Switches
  • Scripting, Detail
Report_template (markdown + lisp LSX scripting)
# 旅費精算申請 (個別)

%%%($last
    ($defun $currency (v)
        ($to-locale-string "en-US" (# (style "currency") (currency "JPY")) ($to-number v)) )
    ($defun $percent (v)
        ($to-locale-string "en-US" (# (style "percent")) ($to-number v)) )
    ($defun sum (d col)
        (+ ...($map d (|-> (x) use (col) ($to-number ($get x ($last col) value))))) )
    nil)


## 申請者： %%%($get $data "申請者" value 0 code) %%%($get $data "申請者" value 0 name)


| 出発                         | 帰着                         | 行き先                         | 旅費合計                                     | 経費合計                                     | 精算金額                                     |
|------------------------------|------------------------------|--------------------------------|---------------------------------------------:|---------------------------------------------:|---------------------------------------------:|
| %%%($get $data "出発" value) | %%%($get $data "帰着" value) | %%%($get $data "行き先" value) | %%%($currency ($get $data "旅費合計" value)) | %%%($currency ($get $data "経費合計" value)) | %%%($currency ($get $data "精算金額" value)) |
Preview_data
{
    "申請者": {"value" : [{"code" : "x", "name" : "y"}] },
    "出発": {"value" : "a"},
    "帰着": {"value" : "b"},
    "行き先": {"value" : "c"},
    "旅費合計": {"value" : "1"},
    "経費合計": {"value" : "2"},
    "精算金額": {"value" : "3"}
}
Configs
{
    "title": "旅費精算申請 (個別)"
}

Full LSX Report for list view (for multiple records)

Report_name
  • LSX example
Switches
  • Scripting, LSX, List
Report_template (lisp LSX scripting)
(Html5
    (head (title "LSX Example")
          (meta (@ (charset "UTF-8")))
          (NormalizeCss)
          (PaperCss)
    
        (style (@ (dangerouslySetInnerHTML """$concat

            /* You can write additional styles here. */
            /*
            body {
                background-color: blue;
            }
            */

        """) )) )

    (body (@ (class "A4"))
        ($=for $data
            ;; paper size element
            (section (@ (class "sheet padding-10mm"))
                ::$data:出発:value ","
                ::$data:帰着:value ","
                ::$data:行き先:value ","
                ::$data:旅費合計:value ","
                ::$data:経費合計:value ","
                ::$data:精算金額:value
                ))))
Preview_data
[{
    "出発": {"value" : "a"},
    "帰着": {"value" : "b"},
    "行き先": {"value" : "c"},
    "旅費合計": {"value" : "1"},
    "経費合計": {"value" : "2"},
    "精算金額": {"value" : "3"}
}]
Configs


Embedded report


Report_name


    

  • Embedded example
    • 



Switches


    

  • Scripting, LSX, Detail, List
    • 



Report_template (lisp LSX scripting)


(Markdown """
# Hello
""")


Preview_data


[{}]


Configs






🔶 App that uses the ReportingApp


Customize the following application example.

https://kintone-sol.cybozu.co.jp/apps/073-ryohi.html (🚃 旅費精算申請 App; Travel Expense Reimbursement App)


JS and CSS


JS (PC)



app-buttons.js


/// Please change following constant values ///
window.eXnhAMYWrBVFMczJ__REPORT_APP_ID = 2; // ReportingApp app id
window.eXnhAMYWrBVFMczJ__REPORT_BUTTONS = [ // iterate the ReportingApp record IDs to be displayed in this app.
    { id: 1 }, { id: 2 }, { id: 3 },
    { id: 5, embed: true /*, viewIdsShow: [1234], viewIdsHide: [1234], hideInDetailView: true */ },
                                            // embedded report: display to list and/or detail view.
];
///////////////////////////////////////////////


CSS





⚖️ License


    

  • MIT (except kintone-ace.js, kintone-ace.css)
    • 



Copyright (c) 2019 Shellyl_N


   



        


  
      

      

        

          

            

  
About


      

        Create ✨beautiful✨ 📑📊reports📈📰 easily with Ménneu + kintone.
      


    
Topics

    

        

      
  javascript

      
  markdown

      
  reporting

      
  kintone

      
  lsx

      
  menneu

      
  liyad

  


    


    
Resources

    

      
        
        Readme
    


  
    
License

  

    
      
     MIT license
    
  





  
  

  

    
      
      Activity
  



  
Stars

  

    
      
      2
      stars
  


  
Watchers

  

    
      
      2
      watching
  


  
Forks

  

    
      
      1
      fork
  


    

      
          Report repository
    




          

        


        
            

              

                

  
    Releases
      3



  
    
    

      

        v0.1.3
        
          Latest
      

      
Jun 20, 2019

    

    

      
        + 2 releases


              

            


        
        
            

              

                

  
    Packages
      




      

        No packages published 

      




              

            


        
            

        
        
        
            

              

                
Languages