Code Monkey home page Code Monkey logo

plugin-samples's Introduction

kintone Plug-in Examples

This is a repository for kintone plugin-in examples.

package.sh is now deprecated!

package.sh has been deprecated.

Please use @kintone/plugin-packer instead. It requires Node.js.

Requirement

  • Node.js v12 or later

How to Use

$ npm install -g @kintone/plugin-packer
$ kintone-plugin-packer <plug-in dir> [--ppk <key file>]

For more information, please check the following pages.

Output Files

Plug-in Package

plugin.zip

Private Key

<plug-in id>.ppk

Do not lose the private key! Keep the .ppk file secret and in a safe place. You'll need it later if you want to update the plug-in.

Example

$ cd /tmp
$ git clone https://github.com/kintone/plugin-examples
$ cd plugin-examples
$ npm install -g @kintone/plugin-packer
$ kintone-plugin-packer examples/colorcell
Succeeded: /tmp/plugin-examples/examples/plugin.zip
$ ls examples/*.ppk
examples/dhcpcmonencgafiddfaofdfednmjnbem.ppk

Install Plug-in

See the following document.

en

https://help.cybozu.com/en/k/admin/plugin.html

ja

https://help.cybozu.com/ja/k/admin/plugin.html

How to Lint

The source code of some plugins applies ESLint. Please run ESLint manually as below after making changes. The Ignored files are see .eslintignore.

Run ESLint:

npm install
npm run lint -- examples/<plug-in dir>

# Example
# npm run eslint -- examples/autonum

Run ESLint with --fix option to fix some wrong styles automatically:

npm install
npm run fix -- examples/<plug-in dir>

# Example
# npm run fix -- examples/autonum

Licence

MIT License

Copyright

Copyright(c) Cybozu, Inc.

plugin-samples's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

plugin-samples's Issues

[textConnect] Create option to suppress dialog box

@will-yama Let's modify the plugin settings page to add the following checkbox at the top:
"Prompt if one or more combined fields has no value"

If checked, show the existing message, "At least one of the fields that will be combined has no value. Do you still wish to connect them?" Otherwise, do not show that message.

Default setting should be checked.

JSEdit for kintoneでライブラリー利用するとエラーになる

大変便利なプラグインを提供して頂きありがとうございます。
不具合を見つけましたので報告します。
JSEdit for kintone で jQuery を利用するライブラリ(例えば DataTablesなど)を利用した場合、jQueryより先に DataTablesが読み込まれてしまう為にエラーになります。

[conditionformat2] Other plug-ins break if this plug-in is loaded after them

If other plugins depend on moment.tz() and load before the conditional formatting plugin, then this plugin's moment object overwrites the others. The other plugins (e.g. calendar plugin) break.

Workaround: reimport conditional formatting plugin so that it loads after the other plugins. There's no place where we are currently holding that information.

Possible fix: update this plugin's moment dependencies to a more recent version

[ganttchart] Make the Title of the Gantt Chart a link to the record details page

ガントチャートのタイトルを詳細ページへのリンクにするか否かを設定画面で変更できるようにしたい。

設定画面例
image
 ※on/off自体不要で標準でリンクとしても良いかも知れません。

設定後の画面
image

修正箇所は createRecords1ganttRecordData.name
createRecords2ganttRecordData2.name の定義時にaタグでくくれば良いかと思います。

実装として許容可能であれば、適当なタイミングで実装してPR送ります。

条件書式V2 一覧編集の不具合

フィールド一覧から編集ボタンを押す→編集を終了すると、色がデフォルトのままになってしまいます。
更新したり、ソートしなおすと直りますが、少し気になります。フィールド一覧から編集ボタンを押す→編集を終了すると、色がデフォルトのままになります。

条件書式V2 日付について

お世話になっております。
初心者です。
https://developer.cybozu.io/hc/ja/articles/208236353-%E6%96%B0%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%89%88-%E6%9D%A1%E4%BB%B6%E6%9B%B8%E5%BC%8F%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3
を使用しております。
「提出期限」と日付型のレコードがあります。

これで①この日の5日前なら「背景:黄色」

   ②この日の3日前なら「背景:黄色、文字:赤」

   ③この日を過ぎたら「文字:赤」

ぜひご教授お願い致します。

[conditionformat2]Correspond to time

I request to enhance to correspond not only to the condition of the date but also to the condition of the date and time.
Because there are many jobs to manage by the hour.
Ex. deadline, system fixed time check, delivery arrangements, production status..
It is even better if there is a condition when comparing the current time and the input time.
(From a user comment on developer network JP https://developer.cybozu.io/hc/ja/articles/115001664186/comments/360000242983)

[textConnect] Localization needed

Here are files I noticed need an English-language translation:

  • settings.html, all over [plugin settings page]
  • confirm() text in desktop.js on line 168 [message box]
  • checkValues() in config.js on line 119 [error handling]

I don't think I missed anything but another pair of eyes is always welcome.

[ganttchart] Update the modal so that Sub-titles can be seen even if the Title is too long

ガントチャートプラグインで表示した際に、日付のチップをクリックするとモーダルウィンドウで日付を変更する画面が表示されますが、大項目名が長いと中項目が表示されず、何について変更をしているのか判別しづらくなっています。
image

暫定的な対応として、h3配下に埋め込んでいる、data.name と data.desc の間に <br /> を挿入して、
下記の画面のようにしていただけますか。
image
該当コード行: https://github.com/kintone-samples/plugin-samples/blob/master/examples/ganttchart/js/desktop-ganttchart.js#L171

本来、分離するつもりであれば data.desc を h3 タグの中から取り出し、
div や h4 等に付け替える必要はあると感じていますが、
css の修正まで手掛けるよりは手間もかからず必要な効果が出るため上記提案に留めております。

差し支えなければ修正して PullRequest を送りますがいかがでしょうか。

[Vote Plug-in] Error message about the record number may be misleading

レコード番号フィールドを表示しているレコード一覧画面でも「レコード番号フィールドが見つかりません。いいねプラグインを使うためには、フォーム編集画面でレコード番号フィールドを配置する必要があります。」が表示されているようです。一覧画面における動作条件はメッセージの表示通りの条件だけでしょうか?

少し調べさせて頂くと、/k/v1/formのAPIのレスポンスからRECORD_NUMBERが消えた?ように思われます。ドキュメントによればRECORD_NUMBERは対応中のようですが、他のビルトインフィールドも同様でしたので、原因としてはこの辺かなぁと思いました(ドメイン等を変えたりして試しましたが同様でした)。

[Request]colorful-report

週報のタイトル用フィールドの必須を外してほしい。

個別カスタマイズで「ドロップダウン+日付」用に文字列一行をタイトルで活用しています。
その場合、このプラグインで別途文字列一行フィールドを設けないといけないので、不要なフィールドができてしまいます。

[conditionformat2] Plug-in stops working if Date is null

If a Date field is placed in the Text Format conditions settings, and the date inside a record has no value, the plug-in stops coloring in any cells that come after that field.

Bug Replication

  1. Create an App with a Date field and a Text field
  2. Set the Conditional Format plug-in, with the below settings

Text Format Condition

Field with condition Condition Value Field to Format Font Color Background Color Font Size Style
Date = 2018-09-14 Date #2500FF #FF0000 Normal Normal
Text = test Text #2500FF #FF0000 Normal Normal

Save the settings and update the App.

  1. Add a record into the App.
    Place no value inside the Date field.
    Place the value test into the Text field

  2. After saving, view the Record Details page or the Record List page.

What should happen

Date field is not styled (as the condition does not match).
Text field is styled with blue text and red background.

What actually happens

Date field is not styled.
Text field is also not styled.
An error appears in the console:

"Uncaught TypeError: Cannot read property 'match' of null"

conditonal_format_bug

Thoughts

There is an if statement in desktop.js that compares the "field" variable, but this field variable will have no properties if it is null. Probably needs to check if the value is null first before going into this statement.

https://github.com/kintone/plugin-examples/blob/b4b3dc28c502f3d398397d2958b50e1d0af1dd9f/examples/conditionformat2/js/desktop.js#L152

momentオブジェクトの取扱について

Moment.js、Moment Timezoneを用いたJavaScriptカスタマイズを適用していたアプリでconditionformat2を設定したところ、moment.tz is not a function のエラーが出て、カスタマイズで利用していたMoment Timezoneが効かなくなりました。

事象としては、JSカスタマイズからプラグインの順でJSファイルが読み込まれるため、tzがないmomentオブジェクトがプラグイン側でwindowに付加された状態でmoment.tzをコールしているためだと考えられます。

  1. カスタマイズでmoment.jsが読み込まれ、momentオブジェクトがwindowに付加される
  2. カスタマイズでmoment-timezone.jsが読み込まれ、momentオブジェクトにtzが付加される
  3. プラグインでmoment.jsが読み込まれ、momentオブジェクトがwindowに再付加される
  4. カスタマイズでmoment.tzを利用している部分が実行されたタイミングで、moment.tz is not a function になる

プラグインやカスタマイズ間の、window(グローバル)でのオブジェクト汚染の一種として捉えることが出来るかと思いますが、現状の回避作はWebpackによるパッケージング等を除けば moment.js 利用時には moment-timezone.js もセットでロードしておくことになるかと思います。manifest.json並びに公式Zipファイルの更新をご検討頂けますと幸いです。

本件、プラグインを一旦無効化すると復帰したことを確認しています。

[kyotenn] Map display bug

The plug-in settings show that the "マーカーのツールチップに表示する項目のフィールドを選択してください" field is not required, but when it is left empty, the map disappears.

With the "マーカーのツールチップに表示する項目のフィールドを選択してください" field filled in:
screen shot 2019-01-08 at 4 19 56 pm
screen shot 2019-01-08 at 4 20 29 pm

Without the "マーカーのツールチップに表示する項目のフィールドを選択してください" field filled in:
screen shot 2019-01-08 at 4 20 47 pm
screen shot 2019-01-08 at 4 23 00 pm

[conditionformat2] Possible fix for Safari incompatibility with color picker

Hi there @masaya-chikamoto @MaedaAs @north-river:

As the English documentation on Kintone Dev Network says, "The color picker is only available in Firefox and Chrome. It may not work on other browsers."

However, Safari 11 (released Sept 18, 2017) reports support for <input type="color"> (the 'color picker'). See https://caniuse.com/#feat=input-color

When I tested Conditional Format 2 plugin in the latest version of Safari (11.0.1) I was unable to generate a color picker window on click of the paintbrush.

I reviewed config.js lines 450-487 and I understand that clicking on the paintbrush <i> element runs a jQuery function that clicks on a hidden <input type="color"> element.

When I comment out display: none in the stylesheet for .cf-plugin-column5-color and .cf-plugin-column6-color classes that are responsible for hiding that element, a tiny square appears to the right of the paintbrush. Clicking on the paintbrush now generates the color picker. The color picker pops up from out of the tiny square.

It makes sense that the input element is hidden in Chrome and Firefox--it's UGLY. But hiding it in Safari breaks the color picker.

I researched to find a good way to check if the user is browsing with Safari and to get the browser version number.

I'm thinking that in line 243, right before the setTextDefault function definition, we can add:

function isSafariAtLeastVersion11() {
  let isSafari = Boolean(navigator.vendor) && navigator.vendor.indexOf('Apple') > -1 &&
                 Boolean(navigator.userAgent) && !navigator.userAgent.match('CriOS');

  let nAgt = navigator.userAgent;
  
  let fullVersion = "" + parseFloat(navigator.appVersion); 
  let majorVersion = parseInt(navigator.appVersion, 10);
  let verOffset;

  if (nAgt.indexOf("Safari") !== -1 && nAgt.indexOf("Chrome") === -1) {
    verOffset = nAgt.indexOf("Safari");
    fullVersion = nAgt.substring(verOffset + 7);
    if (nAgt.indexOf("Version") !== -1) {
      verOffset = nAgt.indexOf("Version");
      fullVersion = nAgt.substring(verOffset + 8);
    }
  }

  majorVersion = parseInt("" + fullVersion, 10);

  return isSafari && majorVersion >= 11;
}

(I tested the following code in a codepen on a variety of different OSes and browsers to make sure it was getting the expected outcome.)

Then we can change the instances of the two classes .cf-plugin-column5-color and .cf-plugin-column6-color to variables whose value is an empty string when isSafariAtLeastVersion11() is true.

.cf-plugin-column5-color is referenced on lines 270, 309, 465.
.cf-plugin-column6-color is referenced on lines 273, 276, 313, 315, 475.

Thoughts?

[ganttchart] Dates in the Gantt chart fail to be shown if the first record's date field is not set

一覧表示した際に先頭のレコードの日付欄が空値だと、
jquery.gantt がカレンダーの生成に失敗し日付欄のヘッダが NaN や undefined となる。

・問題ない例(Test1には日付が設定されている)
image

・問題ある例(Test2には日付が設定されていない)
image

原因等の調査結果はこちらに記載しております。
https://developer.cybozu.io/hc/ja/articles/203716110/comments/900001456206

拠点案内プラグインの企業ID欄の不具合

プラグインの設定画面で、「詳細画面のマップの高さ」欄を変更して、保存すると…
「企業ID」欄が変更されてしまうようです。

再現方法
 1.詳細画面のマップの高さに「400px」と入力し保存する。
 2.再度、プラグインの設定画面を開くと、企業ID欄に「400px」と表示される。

colorful-report

ハイライトする行に含める文字で、次のような現象があります。

ハイライトする行に含める文字:「★」 にするとおかしな現象があります。

  1. ハイライトされる(★の前に全角スペース、★の後は空白)
     ★
  2. ハイライトされない(★の前に全角スペース、★の後は文字列)
     ★文字あり

[textConnect] missing empty value handling

When combining three fields with the Text Connect plugin (first_name, middle_name, last_name) and joining with a " " character:

If the value for middle_name is left empty, the resulting value is "first_name last_name" (two spaces).

There is an extra join character here. Join character logic needs to be fixed to handle one or more consecutive empty values.

Suggestion: pass the final string through a filter that replaces all substrings of >1 join characters with a single join character. Return this filtered string as the new value.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.